jQuery非侵入式验证会忽略&“取消&"提交按钮上的类(如果以Ajax形式使用) [英] jQuery unobtrusive validation ignores "cancel" class on submit button if used in Ajax form

问题描述

我正在尝试使用

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

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

Following pictures show what I mean with optional client side validation: The only one field on my form is expected to contain email, so there is an email validator attached to it.

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

Now we click on save. Because our text "name@doamin" is not a valid email the validation summary gets displayed. Together with validation summary we are unhiding "Save anyway" button.

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

This second button is a normal submit button just having class="cancel". This instructs jQuery.validate.js script to skip validation when submitting using this button.

以下是视图的代码段:

@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表单，第二个提交按钮-仍然保存" 将按预期停止工作.它的行为类似于正常行为，并在验证成功之前阻止提交.

The second submit button - "Save anyway" stops working as expected if I switch over to Ajax form. It just behaves like the the normal one and prevents submit until validation succeeds.

以下是"ajaxified"视图的代码段:

Here is the code snippet of the "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 来找出区别，但是失败了.

I have debugged jQuery.validation.js to find out what is the difference, but failed.

欢迎提出任何解决或解决该问题并让ajax表单按预期方式运行的想法.

Any ideas to fix or workaround the problem and let the ajax form behave as intended are welcome.

要进行客户端验证是绝对必要的.服务器端验证不是一种选择.除了更高的流量(此示例是一种简化-实际形式包含更多字段)和延迟之外，服务器端验证还没有做一件事:客户端验证器会在失去焦点的情况下突出显示错误的字段.这意味着您只要跳到下一个字段，就会收到反馈.

To have a client side validation is an absolute must. Server side validation is not an option. Aside from higher traffic (this sample is a simplification - the real form contains much more fields) and latency, there is one thing which server side validation would not do: client side validators highlight erroneous fields on lost focus. It means you have a feedback as soon as you tab to the next field.

推荐答案

这是Microsoft简洁的Ajax脚本的已知限制.您可以修改它以修复该错误.因此，在 jquery.unobtrusive-ajax.js 脚本中，在144行上替换以下内容:

That's a known limitation of Microsoft's unobtrusive ajax script. You could modify it to fix the bug. So inside the jquery.unobtrusive-ajax.js script replace the following on line 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行，我们修改以下测试:

In addition we are passing the class name to the handler so that it can decide whether it should trigger client side validation or not. Currently it always triggers validation no matter which button was clicked. And now on line 154 we modify the following test:

if (!validate(this)) {

具有:

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

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

so that client side validation is no longer triggered if a submit button with class name cancel was used to submit the form. Another possibility is to scrape the jquery.unobtrusive-ajax.js script and replace your Ajax.BeginForm with a standard Html.BeginForm that you could unobtrusively AJAXify using plain old jQuery.

这篇关于jQuery非侵入式验证会忽略&“取消&"提交按钮上的类(如果以Ajax形式使用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！