Asp.Net Mvc 4：点击提交按钮时表单验证答案

【问题标题】：Asp.Net Mvc 4: form validate on submit button clickAsp.Net Mvc 4：点击提交按钮时表单验证
【发布时间】：2015-04-27 09:28:23
【问题描述】：

我有一个非常简单的时事通讯订阅表格：

    @using (Ajax.BeginForm("Register", "Home", new AjaxOptions
{
    Confirm = "confirm?",
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "response"
}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div id="response">
        <div class="form-group">
            @Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "insert email" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div class="form-group">
            <input type="submit" id="submit" value="subscribe" class="btn btn-default" />
        </div>
    </div>
}

电子邮件字段需要填写，并且是有效的电子邮件。问题是，一旦我开始在文本框中输入内容，验证就会触发，并且会弹出消息“电子邮件无效”。这很烦人。有没有办法在单击提交按钮时触发验证，而不是每次更改文本框？谢谢。

【问题讨论】：

我无法复制这个问题。我认为您可能需要在问题中包含更多页面代码/内容。
您声称的不是默认行为。在控件失去焦点之前，不会触发验证是“惰性”的。如果您重新调整控件的焦点，则验证是“急切的”。您的代码中有其他内容导致此问题
实际上，这似乎是默认行为......正如 Prasanth 在下面所说，我一输入就会触发验证，而不是在字段失去焦点时触发。
垃圾。您应该阅读documentation 进行确认。你正在做其他事情导致这种行为。
好的，这就是我的想法：当字段将其状态更改为无效时，ValidationMessageFor 会触发错误，并且每次字段更改都会发生这种情况。所以我删除了 ValidationMessageFor 并将其替换为 ValidationSummary，它仅在提交点击时触发。谢谢大家的支持。

标签： jquery asp.net-mvc-4 asp.net-ajax unobtrusive-validation

【解决方案1】：

如果您使用 ValidationMessageFor，则 MVC 将在您键入时立即触发。而是使用 Jquery 或 javascript 验证。

HTML：

@Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "insert email" })
<div id="emailerror" class="hide">The email is required</div>

JQuery:

var pattern = /^([\w\-\.]+)@@((\[([0-9]{1,3}\.){3}[0-9]{1,3}\])|(([\w\-]+\.)+)([a-zA-Z]{2,3}))$/;
        var email = $('#Email').val();
        if (email == "") {
            $('#emailerror').removeClass('hide');
            $('#emailerror').addClass('error');
            return false;
        } else if (!pattern.test(email)) {
            $('#emailerror').removeClass('hide');
            $('#emailerror').addClass('error');
            document.getElementById("emailerror").innerHTML = "The Email is not valid";
            return false;
        }
        else {
            $('#emailerror').addClass('hide');
            $('#emailerror').removeClass('error');
            return true;
        }

CSS：

.hide {
display:none;
}

.error {
position: absolute; 
margin-top:48px; 
margin-left:-300px;
z-index: 1060;
max-width: 276px;
padding: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
white-space: normal;
color: #fff;
background-color: #c14a4a;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

【讨论】：

不知道...所以避免这个问题的唯一方法是使用“自定义”jquery 验证？
不@Cuttlefish ..您还有另一种可以避免的选择.. :) 但即使是 Prashanth 的回答也很有效.. :)
"当你输入时，MVC 会立即触发。"!完全垃圾。阅读文档。在控件失去焦点之前，它不会触发验证，并且只有在值已被修改时才会触发。

【解决方案2】：

作为一种替代方法，您可以将函数传递给jquery.validator 的onfocusout 和onkeyup 设置，以决定是否必须在这些事件中验证元素，如下所示：

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}

SOURCE

【讨论】：