jquery - 使用部分 View 的客户端验证

Question

我刚刚完成了表单的可视化逻辑，现在我想使用 asp.net mvc 3 提供的客户端验证。然而，即使我遵循一些示例，我也无法使其工作，而且我不知道可能是什么原因。

这是我的主要观点:

@model List<DataAccess.MCS_DocumentFields>

@{
    ViewBag.Title = "Documents";
}

<div id="drawForm">
@using (Html.BeginForm("RecieveDataFromDocument", "Forms", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <table border="1">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)
    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit">Save</button>   
    }
    else
    { 
        @Html.ActionLink("Back", "Index")
    }
}
</div>

实际上这里并没有太多。大部分逻辑都在我的部分。我使用数据注释，所以我认为默认情况下我会进行一些客户端验证，但事实似乎并非如此。我所做的就是确保我已经

<appSettings>

  <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

添加到我的 web.config。另外，在我看来，您可以看到我添加了

@Html.ValidationSummary(true)

不确定这是否是合适的地方，但它就在那里。另外，在我从那里查看的示例中还有:

<div class="editor-label">

    @Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

    @Html.TextBoxFor(model => model.Name)

    @Html.ValidationMessageFor(model => model.Name)

</div>

我没有这样的<div>标签和此类名称，但是当我在 View 源中启动应用程序时，我可以看到每个输入:

Name comes from DB
                <input data-val="true" data-val-required="The FieldValue field is required." name="[4].FieldValue" type="hidden" value="Name comes from DB" />

我认为这足以进行客户端验证。但因为我没有得到任何结果，所以我在部分 View 之一中添加了以下内容以进行测试:

<div class="editor-label">
                    @Html.DisplayFor(x => Model[i].QuestionText)
                    </div>
                    <div class="editor-field">
                    @Html.TextBox("datepicker", "", new { @class = "datepicker" })
                    @Html.ValidationMessageFor(x => Model[i].QuestionText)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...some code...
                    <div class="editor-field">
                    @Html.EditorFor(x => Model[i].FieldValue)
                    @Html.ValidationMessageFor(x => Model[i].FieldValue)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...more code..

但是，即使这两个字段在验证失败时也不会生成错误。所以我想我要么错过了什么，要么做错了什么。我怀疑这种验证是否可以以这种方式工作 - 使用部分？

Answer 1

为了在 mvc 中获得客户端验证(我在 mvc4 上工作，但我认为在您的情况下是相同的)，需要检查一些步骤:

1. 在 Web.config 中

   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   

2. 布局(或母版页)中的脚本

   <script src="/Scripts/jquery.validate.js"></script>
   <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
   <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
   

3. 为模型验证属性提供要显示的错误消息(例如)

   public class ContactForm
   {
   [Display(Name = "Mail :"),
   Required(AllowEmptyStrings = false, ErrorMessage = "Mail required"),
   RegularExpression("^(|[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+[.][a-zA-Z]{2,3})$", ErrorMessage = "Mail not valid"),
   Remote("IsValidMail", "Validate", HttpMethod="GET")] /* remote validation */
   public string Mail { get; set; }
   
   [Display(Name = "Message :"),
   Required(AllowEmptyStrings = false, ErrorMessage = "Message required"),
   StringLength(maximumLength: 400, ErrorMessage="Message too long")]
   public string Message { get; set; }
   
   public ContactForm() { }
   

   }

4. 在 View 中显示错误消息

   @Html.ValidationMessageFor(x=>x.Mail) 
   

   或

   @Html.ValidationSummary(false, null, new { @id = "ValidationSummary" })    
   

   正如你所做的那样。

5. 实际上，它的工作原理是这样的，但是如果是部分 View 中的 ajax 表单，您需要重新绑定(bind)页面加载时的验证(在 ajax 调用或 $(function(){} 成功事件中)部分 View )

   ///because the page is loaded with ajax, the validation rules are lost, we have to rebind them:
       $('#form').removeData('validator');
       $('#form').removeData('unobtrusiveValidation');
       $("#form").each(function () { $.data($(this)[0], 'validator', false); }); //enable to display the error messages
       $.validator.unobtrusive.parse("#form");
   

小心部分 View ，不要重复脚本并启用验证。 最好的问候