jquery - .NET MVC Razor 客户端验证不等待表单提交

Question

我在 Razor 中实现了一个 .NET MVC 表单，它使用客户端验证(jquery.validate.js 和 jquery.validate.unobtrusive.js)。我的表单有许多不同的必填字段，其格式经过验证。我在模型中使用数据注释来定义它。例如:

[Required(ErrorMessage = "SSN is required")]
[RegularExpression(@"^\d{3}-\d{2}-\d{4}|\d{9}$", ErrorMessage = "SSN must be in the format 000-00-0000")]
[Display(Name = "SSN")]
public string Ssn { get; set; }

默认行为似乎是在每个表单字段发生变化时对其进行验证。以 SSN 为例，当我开始输入 SSN 时，我会看到一条错误消息:“SSN 必须采用 000-00-0000 格式”。我发现这是一种侵入性/分散注意力的用户体验，因为实际上还没有发生错误；我只是还没有完成数据输入。

有没有办法将客户端验证配置为在至少一个字段失去焦点之前不进行验证？理想情况下，直到提交表单后才进行。

提前致谢。

FWIW，这是我的表单的样子:

@using (Html.BeginForm("AccountSetup", "Account", FormMethod.Post, new { role = "form", autocomplete = "off" }))
{
    @Html.ValidationSummary(true, "Please correct the error(s) below.")
    <div class="form-group">
        @Html.LabelFor(m => m.SocialSecurityNumber, new { @class = "label-required" })
        @Html.TextBoxFor(m => m.SocialSecurityNumber, new { @class = "form-control", maxlength = 11, data_mask = "000-00-0000" })
        @Html.ValidationMessageFor(m => m.SocialSecurityNumber)
    </div>
}

我的 web.config 有这些应用程序设置:

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

Answer 1

感谢 @Sparky 建议查看 jQuery 验证文档，我找到了解决方案。我添加了以下 JavaScript 以使表单验证按照我想要的方式运行:

$(document).ready(function () {
    disableResponsiveValidation();

    $("#register-form").on('submit', function () {
        enableResponsiveValidation();
    });

    function disableResponsiveValidation() {
        var validator = $("#register-form").data("validator");
        if (validator) {
            validator.settings.onkeyup = false;
            validator.settings.onfocusout = false;
        }
    }

    function enableResponsiveValidation() {
        var validator = $("#register-form").data("validator");
        if (validator) {
            validator.settings.onkeyup = function (element) {
                $(element).valid();
            };
            validator.settings.onfocusout = function (element) {
                $(element).valid();
            };
        }
    }
});