如果在 Ajax 表单中使用，jQuery 不引人注目的验证会忽略提交按钮上的 "cancel"类

Question

我正在尝试使用

实现可选的客户端验证

• ASP.NET MVC 4，
• 不显眼的 jQuery 验证，
• 不显眼的 ajax

这很好用

以下图片显示了我对可选客户端验证的含义:我的表单上唯一的一个字段应该包含电子邮件，因此附加了一个电子邮件验证器。

现在我们点击“保存”。由于我们的文本“name@doamin”不是有效的电子邮件，因此会显示验证摘要。与验证摘要一起，我们取消隐藏“仍然保存”按钮。

第二个按钮是一个普通的提交按钮，只有 class="cancel"。这指示 jQuery.validate.js 脚本在使用此按钮提交时跳过验证。

这是 View 的代码片段:

@using (Html.BeginForm())
{
    <div>
        <input data-val="true" data-val-email="Uups!" name="emailfield" />
        <span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
    </div>

    <input type="submit" value="Save" />
    @Html.ValidationSummary(false, "Still errors:")
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <input type="submit" value="Save anyway" class="cancel" />
    </div>
}

这些都工作正常。

问题

如果我切换到 Ajax 表单，第二个提交按钮 - “仍然保存” 将停止按预期工作。它的行为就像正常的一样，并在验证成功之前阻止提交。

这是“ajaxified” View 的代码片段:

@using (Ajax.BeginForm("Edit", new { id = "0" },
        new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "ajaxSection",
            }))
{
    <div>
        <input data-val="true" data-val-email="Uups!" name="emailfield" />
        <span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
    </div>

    <input type="submit" value="Save" />
    @Html.ValidationSummary(false, "Still errors:")
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <input type="submit" value="Save anyway" class="cancel" name="saveAnyway" />
    </div>
}

我调试了 jQuery.validation.js 以找出差异所在，但失败了。

问题

欢迎任何修复或解决该问题并让 ajax 表单按预期运行的想法。

<小时/>

附录

客户端验证是绝对必须的。服务器端验证不是一个选项。除了更高的流量(此示例是一种简化 - 真实表单包含更多字段)和延迟之外，服务器端验证不会做一件事:客户端验证器会在失去焦点时突出显示错误字段。这意味着只要您按 Tab 键切换到下一个字段，您就会收到反馈。

Answer 1

这是 Microsoft 不显眼的 ajax 脚本的一个已知限制。您可以修改它来修复该错误。因此，在 jquery.unobtrusive-ajax.js 脚本中替换第 144 行的以下内容:

$(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

与:

$(form).data(data_click, name ? [{ name: name, value: evt.target.value, className: evt.target.className }] : []);

此外，我们将类名传递给处理程序，以便它可以决定是否应该触发客户端验证。目前，无论单击哪个按钮，它总是会触发验证。现在在第 154 行我们修改以下测试:

if (!validate(this)) {

与:

if (clickInfo[0].className != 'cancel' && !validate(this)) {

这样，如果使用类名为cancel的提交按钮提交表单，则不再触发客户端验证。另一种可能性是抓取jquery.unobtrusive-ajax.js脚本并用标准Html.BeginForm替换您的Ajax.BeginForm，您可以使用普通的旧式 jQuery 不显眼地进行 AJAXify。