DateRange client side validation in ASP .NET6 using Fluent Validation

Question

In my application I'm using a form to enter user information including birthdate. I want to perform both client-side and server-side validation and I'm using Fluent Validation.

I want a clean solution and have choosen not to use build-in validation using attributes. Everything works as expected but not client-side InclusiveBetween (or a combined GreaterThanOrEqualTo/LessThanOrEqualTo). Server-Side validation works as expected.

Input DTO:

public class PersonDto
{
    // properties omitted

    public DateTime? BirthDate { get; set; }

    // properties omitted
}

Custom Validator for PersonDto

public class PersonDtoValidator : AbstractValidator<PersonDto>
{
    public PersonDtoValidator()
    {
        DateTime start = DateTime.Now.AddYears(-100);
        DateTime end = DateTime.Now;

        // Rules omitted

        RuleFor(person => person.BirthDate)
            .InclusiveBetween(start, end)
            .NotEmpty();

        // Rules omitted
    }
}

Generated Html

(sorry for the Danish language in the validation message):

<div class="form-floating mt-1">
    <input class="form-control form-control-sm" type="date" data-val="true" data-val-range="&#x27;Birth Date&#x27; skal v&#xE6;re mellem 21-04-1922 00:00:00 og 21-04-2022 00:00:00." data-val-range-max="04/21/2022 00:00:00" data-val-range-min="04/21/1922 00:00:00" data-val-required="&#x27;Birth Date&#x27; b&#xF8;r ikke v&#xE6;re tom." id="Person_BirthDate" name="Person.BirthDate" value="1988-03-12" />
    <label for="Person_BirthDate">Birth date</label>
</div>
<span class="text-danger small field-validation-valid" data-valmsg-for="Person.BirthDate" data-valmsg-replace="true"></span>

Use of InclusiveBetween

I have tested using InclusiveBetween on properties of other types as i.e. long. Client-Side validation works as expected.

Use of nullable DateTime

Changing from Datetime? to DateTime has no effect.

Any Ideas?

To my eye everything looks fine and i'm left frustrated. Hope anyone can help? I'm using .Net6 using the standard Razor Page Template and corresponding Jquery assembly (no changes made). FluentValidation v10.4.0

Update!

Some have speculated RangeAttribute not to support DateTime according to official documentation, DateTime is supported. https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.rangeattribute?view=net-6.0

This leaves the issue being related to jQuery.validate.unobtrusive library. Have any one got the library to perform client-side validation of a DateTime RangeAttribute?

Answer 1

Add this code in your page:

@section Scripts{ 
    //......  
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}   
}

Then it will work well

=============================

<form method="post">
    <div class="form-floating mt-1">
    <input class="form-control form-control-sm" type="date" data-val="true" data-val-range="&#x27;Birth Date&#x27; skal v&#xE6;re mellem 21-04-1922 00:00:00 og 21-04-2022 00:00:00." data-val-range-max="04/21/2022 00:00:00" data-val-range-min="04/21/1922 00:00:00" data-val-required="&#x27;Birth Date&#x27; b&#xF8;r ikke v&#xE6;re tom." id="Person_BirthDate" name="Person.BirthDate" value="1988-03-12" />
    <label for="Person_BirthDate">Birth date</label>
    <span class="text-danger small field-validation-valid" data-valmsg-for="Person.BirthDate" data-valmsg-replace="true"></span>
    </div>

    <button type="submit">submit</button>    
</form>


<script src="~/lib/jquery/dist/jquery.min.js"></script>
<partial name="_ValidationScriptsPartial" />