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

reference added
```
 using Foolproof;
```

Script added

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

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.

you should do it with javascript. add an onclick event on your submit button that will check the startdate and enddate before it submits the form. — Romeo, May 27 '14 at 12:04
Thank you for your response. Actually my requirement is to achieve this using FoolProof. — b_in_U, May 27 '14 at 12:14
@StephenMuecke Edited my question with cshtml code. Thanak you. — b_in_U, May 28 '14 at 09:15
Your cshtml code all looks OK. Have you checked the js files as per Jay's answer? — , May 28 '14 at 09:48
@StephenMuecke yes tried that also, which not making any impact. — b_in_U, May 28 '14 at 09:51

score 1 · Answer 1 · answered May 27 '14 at 13:08

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>

FromDate ToDate clientside validation using foolproof in MVC not working

1 Answers1