Question

我在我的Web.config中有这个：

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

我的观点模型：

public class CustomerViewModel
{
    public Guid Id { get; set; }

    [Required]
    [DisplayName("First Name")]        
    public string FirstName { get; set; }
}

我的观点：

@using (Html.BeginForm(MVC.Customers.Edit(), FormMethod.Post, new { id = "edit-customer" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>        

        ...

    </div>
}

这就是“form-group”div的呈现方式：

<div class="form-group">
    <label class="control-label col-md-2" for="FirstName">First Name</label>
    <div class="col-md-10">
        <input id="FirstName" class="form-control text-box single-line" name="FirstName" value="" type="text" data-val-required="The First Name field is required." data-val="true">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="FirstName"></span>
    </div>
</div>

我按此顺序加载jQuery脚本：

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

单击按钮时，使用ajax调用显示表单。它也是用ajax提交的。当我没有做任何验证时，一切正常。我添加了验证，我无法在ajax调用之前触发它。这是我在提交表单的点击处理程序中所做的：

var formToSubmit = $('#' + attrData.formIdToSubmit);
if (!formToSubmit.valid()) {
    return false;
}

formData = formToSubmit.serialize();
...

我希望formToSubmit.valid()触发验证，并在FirstName字段中输入任何内容时返回false。在实践中，它返回true，然后在服务器上验证失败，ModelState.IsValid按预期返回false。在查看jQuery验证文档时，看起来它需要required属性，如下所示：

<input id="FirstName" class="form-control text-box single-line" name="FirstName" value="" type="text" data-val-required="The First Name field is required." data-val="true" required>

如果我使用dev工具添加它，然后单击“提交”按钮，则对formToSubmit.valid()的调用将按预期返回false，但错误消息不会在span创建的@Html.ValidationMessageFor中结束。 {1}}，它最终会出现一个新添加的标签，如下所示：

<label for="FirstName" class="error">This field is required.</label>

我做错了什么？

Answer 1

以下是我最终修复它的方法：

var formToSubmit = $('#' + attrData.formIdToSubmit);
formToSubmit.removeData("validator")
            .removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(formToSubmit);
if (!formToSubmit.valid()) {
    return;
}

formData = formToSubmit.serialize();
...

为什么我的jQuery验证不起作用？

1 个答案: