ASP.NET MVC jQuery Unobtrusive Validation to compare between two dates

Question

I'm trying to validate StartDate and EndDate using System.ComponentModel.DataAnnotations, such that the End Date must not be lesser than the Start Date. In my Model, I have defined the dates as follows:

public partial class MyModel
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    public DateTime EndDate { get; set; }
}

And I have also created a View Model as follows:

public class CompareDateVM : IValidatableObject
{

    public MyModel myModel { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) {

        if (myModel.EndDate < myModel.StartDate) {
            yield return
              new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.",
                                   memberNames: new[] { "EndDate" });
        }
    }
}

The server-side validation works and the error message is able to display in my View Page's `@Html.ValidationSummary(), but I am unable to get the validation working on the client-side.

@model CompareDateVM
<form asp-controller="AddDate" asp-action="Add" method="post">

    <label class="label">Start Date</label>
    <input type="date" asp-for="myModel.StartDate" />
    <span asp-validation-for="myModel.StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input type="date"  asp-for="myModel.EndDate" />
    <!-- This is where the client side validation error message show up, but it does not appear-->
    <span asp-validation-for="myModel.EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>
<!-- Server side validation works -->
<p>@Html.ValidationSummary()</p>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

How do I get <span asp-validation-for="myModel.StartDate" class="validation"></span> to show the error message on client side with jQuery Unobtrusive Validation?

I have answered your question and updated my answer a little bit now . Follow it as exactly as it was described. Hope it will solve your problem. — TanvirArjel
– TanvirArjel, Commented Jul 29, 2018 at 17:31
IValidatableObject does not give client side validation. For that you need a ValidationAttribute that iplmements IClientModelValidator (refer Model validation in ASP.NET Core MVC — user3559349
– user3559349, Commented Jul 29, 2018 at 21:40

TanvirArjel · Accepted Answer · 2018-07-30 17:49:25Z

2

To get the custom unobtrusive validation in ASP.NET/ASP.NET Core MVC, you need to use RemoteAttribute as follows:

Step1: Your Model class should be as follows:

public partial class MyModel : IValidatableObject
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    [Remote(action: "IsEndDateSmallerThanStartDate", controller: "Validation", AdditionalFields = nameof(StartDate), ErrorMessage = "End Date cannot be lesser than Start Date.")]
    public DateTime EndDate { get; set; }

   // This is for server side protection
   public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
   {
       if (EndDate < StartDate)
       {
          yield return new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.", memberNames: new[] { "EndDate" });
       }
   }
}

Step 2: Then in the Validation Controller:

public class ValidationController : Controller
{
    public JsonResult IsEndDateSmallerThanStartDate(DateTime endDate, DateTime startDate)
    { 
        bool isEndDateGreaterThanStartDate =  endDate > startDate;
        return Json(isEndDateGreaterThanStartDate); // if isEndDateGreaterThanStartDate variable value is true, that means validation is successful, if false that means validation fails.
    }
}

Remember you don't need any ViewModel, so remove the ViewModel.

Step-3 : Then your cshtml file should be as follows:

@model MyModel

<form asp-controller="AddDate" asp-action="Add" method="post">
    <!-- Server side validation works -->
    <p>@Html.ValidationSummary()</p>

    <label class="label">Start Date</label>
    <input asp-for="StartDate" class="form-control" />
    <span asp-validation-for="StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input asp-for="EndDate" class="form-control" />
    <span asp-validation-for="EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

Hope everything will now work as expected!

edited Jul 30, 2018 at 17:49

answered Jul 29, 2018 at 17:19

TanvirArjel

32.5k14 gold badges89 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

iamhx Over a year ago

Thanks, but my form doesn't seem to be submitting anymore.. it worked for a moment however, but the error showed up even when the end date was not lesser than the start date.

TanvirArjel Over a year ago

Wait I am checking it again.

iamhx Over a year ago

It's working again, turns out i got the action and controller set wrongly. But the end date error still shows up even when its not lesser than the start date

TanvirArjel Over a year ago

I have updated the validation controller. Please check. Please debug the validation controller code and let me know the isEndDateGreaterThanStartDate variable value while endDate is greater than startDate.

TanvirArjel Over a year ago

Please check the answer again. I have updated the model class for server side validation protection.

|

Collectives™ on Stack Overflow

ASP.NET MVC jQuery Unobtrusive Validation to compare between two dates

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related