jquery - 在 MVC 中使用万无一失的 FromDate ToDate 客户端验证不起作用

Question

我的页面 fromDate 和 ToDate 中有两个日期字段。ToDate 应该大于 FromDate。我需要在客户端验证它。我正在使用 Foolprof 进行侧边验证

1. 添加了参考

    using Foolproof;
   

2. 添加了脚本

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

3. 我的模型包含以下代码

   [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; }
   

并在控制器中使用默认脚手架完成。

我的 .cshtml 包含以下日期代码

<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> 

现在我的验证不在客户端工作，而是在单击提交按钮后在服务器端工作。

请给我一些指导..

谢谢你。

Answer 1

我认为您还没有引用 jQuery 库。如果您使用的是 Unobtrusive，则应使用以下脚本

<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>

如果您使用 jQuery 验证，请在标准客户端验证脚本文件中包含 MvcFoolproofJQueryValidation.js

<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>