.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 must be in the format 000-00-0000"。我发现这是一个 invasive/distracting UX，因为实际上还没有发生错误；我只是没有输入完数据。

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

提前致谢。

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

如果您不想在提交之前进行验证，那么甚至不必为客户端验证操心。重点是尽快通知用户有关错误的信息。如果您只是将其关闭，然后在提交时，表单将重新加载并出现服务器端验证错误。

Answer 2

感谢@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();
            };
        }
    }
});

.NET MVC Razor 客户端验证不等到表单提交

.NET MVC Razor client-side validation not waiting until form submit

asp.net-mvc

jquery

jquery-validate

razor

unobtrusive-validation