客户端验证使用部分视图

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>标签和类名,但是当我在viewsource中启动我的应用程序时,我可以看到每个输入:

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

我认为这足以让客户端验证发生.但是因为我没有得到任何我在我的部分视图中添加的仅用于测试以下内容:

<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. 在视图中,显示错误消息

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

   要么

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

   就像你做的那样.

5. 实际上,它的工作方式与此类似,但是在部分视图中的ajax表单的情况下,您需要在页面加载时重新绑定验证(在ajax调用的成功事件或部分视图的$(function(){})

   ///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");
   

请注意部分视图,不要使脚本加倍并启用验证.最好的祝福