BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"
@using Microsoft.Extensions.Logging
@inject ILogger<Index> Logger
@using System.ComponentModel.DataAnnotations

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            From Date:
            <InputDate TValue="DateTime?"
                       Value="exampleModel.FromDate"
                       ValueChanged="HandleFromDateChanged"
                       ValueExpression="() => exampleModel.FromDate" />
        </label>
        <ValidationMessage For="() => exampleModel.FromDate" />
    </p>

    <p>
        <label>
            To Date:
            <InputDate TValue="DateTime?"
                       Value="exampleModel.ToDate"
                       ValueChanged="HandleToDateChanged"
                       ValueExpression="() => exampleModel.ToDate" />
        </label>
        <ValidationMessage For="() => exampleModel.ToDate" />
    </p>

    <button type="submit">Submit</button>
</EditForm>

@code {
    #nullable enable
    private EditContext? editContext;
    private DateTimeModel exampleModel = new DateTimeModel();

    protected override void OnInitialized()
    {
        editContext = new EditContext(exampleModel);
    }

    private void HandleFromDateChanged(DateTime? fromDate)
    {
        exampleModel.FromDate = fromDate;

        if (editContext != null && exampleModel.ToDate != null)
        {
            FieldIdentifier toDateField = editContext.Field(nameof(DateTimeModel.ToDate));
            editContext.NotifyFieldChanged(toDateField);
        }
    }

    private void HandleToDateChanged(DateTime? toDate)
    {
        exampleModel.ToDate = toDate;

        if (editContext != null && exampleModel.FromDate != null)
        {
            FieldIdentifier fromDateField = editContext.Field(nameof(DateTimeModel.FromDate));
            editContext.NotifyFieldChanged(fromDateField);
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public class DateTimeModel
    {
        [Required]
        [DateMustBeBefore(nameof(ToDate))]
        [DataType(DataType.Date)]
        public DateTime? FromDate { get; set; }

        [Required]
        [DateMustBeAfter(nameof(FromDate))]
        [DataType(DataType.Date)]
        public DateTime? ToDate { get; set; }
    }

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
    public class DateMustBeAfterAttribute : ValidationAttribute
    {
        public DateMustBeAfterAttribute(string targetPropertyName)
            => TargetPropertyName = targetPropertyName;

        public string TargetPropertyName { get; }

        public string GetErrorMessage(string propertyName) =>
            $"'{propertyName}' must be after '{TargetPropertyName}'.";

        protected override ValidationResult? IsValid(
            object? value, ValidationContext validationContext)
        {
            var targetValue = validationContext.ObjectInstance
                .GetType()
                .GetProperty(TargetPropertyName)
                ?.GetValue(validationContext.ObjectInstance, null);
            
            if ((DateTime?)value < (DateTime?)targetValue)
            {
                var propertyName = validationContext.MemberName ?? string.Empty;
                return new ValidationResult(GetErrorMessage(propertyName), new[] { propertyName });
            }

            return ValidationResult.Success;
        }
    }

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
    public class DateMustBeBeforeAttribute : ValidationAttribute
    {
        public DateMustBeBeforeAttribute(string targetPropertyName)
            => TargetPropertyName = targetPropertyName;

        public string TargetPropertyName { get; }

        public string GetErrorMessage(string propertyName) =>
            $"'{propertyName}' must be before '{TargetPropertyName}'.";

        protected override ValidationResult? IsValid(
            object? value, ValidationContext validationContext)
        {
            var targetValue = validationContext.ObjectInstance
                .GetType()
                .GetProperty(TargetPropertyName)
                ?.GetValue(validationContext.ObjectInstance, null);

            if ((DateTime?)value > (DateTime?)targetValue)
            {
                var propertyName = validationContext.MemberName ?? string.Empty;
                return new ValidationResult(GetErrorMessage(propertyName), new[] { propertyName });
            }

            return ValidationResult.Success;
        }
    }
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
	
	<script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <style>
        .valid.modified:not([type=checkbox]) {
            outline: 1px solid #26b050;
        }

        .invalid {
            outline: 1px solid red;
        }

        .validation-message {
            color: red;
        }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.