FromDate ToDate clientside validation using foolproof in MVC not working

Question

I have two date field in my Page fromDate and ToDate. ToDate should be greater than FromDate. I need to validate it in client side. I'm using Foolprof for clied side validation

1. reference added

    using Foolproof;
   

2. Script added

   <script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
    <script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
   <script src="~/Scripts/MvcFoolproofValidation.min.js"></script>
   

3. My model contains below code

   [Required(ErrorMessage = "The start date is required")]
   public DateTime StartDate { get; set; }
   
   [Required(ErrorMessage = "The end date is required")]
   
   [GreaterThan("StartDate")]
   public DateTime EndDate { get; set; }
   

and in controller done using default scaffolding.

my .cshtml contain below code for Dates

<div class="form-group">

        @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })

        </div>
    </div> 

Now my validation is not working in Client side but working in server side after clicking submit button.

Please provide me some guidence..

Thank you.

Answer 1

I think you have not referenced jQuery Library. If you are using Unobtrusive, you should use below scripts

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/mvcfoolproof.unobtrusive.js")" type="text/javascript"></script>

If you are using jQuery validation, include MvcFoolproofJQueryValidation.js with the standard client validation script files

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-validate.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="../../Scripts/MvcFoolproofJQueryValidation.js" type="text/javascript"></script>