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

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>

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

<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();
...