. 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>
}

我的网页。配置有这些应用设置:

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

Answer 2

如果在提交之前不需要验证，那么就不要使用客户端验证。关键是要让用户尽快注意到错误。如果您只是关闭它，那么在提交时，表单将重新加载来自服务器端验证的错误。