jQuery 不显眼的验证忽略“取消"如果在 Ajax 表单中使用，则提交按钮上的类 [英] jQuery unobtrusive validation ignores "cancel" class on submit button if used in Ajax form

问题描述

我正在尝试使用

实现可选的客户端验证

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

这很好用

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

现在我们点击保存.因为我们的文本 "name@doamin" 不是有效的电子邮件，所以会显示验证摘要.连同验证摘要，我们正在取消隐藏仍然保存" 按钮.

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

这是视图的代码片段:

@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>

<input type="submit" value="保存"/>@Html.ValidationSummary(false, "仍然有错误:")<div class="validation-summary-valid" data-valmsg-summary="true"><input type="submit" value="仍然保存" class="cancel"/>

}

这些都很好.

问题

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

这是ajaxified"视图的代码片段:

@using (Ajax.BeginForm("Edit", new { id = "0" },新的 Ajax 选项{HttpMethod = "POST",插入模式 = 插入模式.替换，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>

<input type="submit" value="保存"/>@Html.ValidationSummary(false, "仍然有错误:")<div class="validation-summary-valid" data-valmsg-summary="true"><input type="submit" value="仍然保存" class="cancel" name="saveAnyway"/>

}

我已经调试了 jQuery.validation.js 以找出有什么区别，但失败了.

问题

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

<小时>

附录

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

解决方案

这是 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)) {

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

I am trying to implement optional client side validation using

• ASP.NET MVC 4,
• unobtrusive jQuery validation,
• unobtrusive ajax

This works fine

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.

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.

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.

Here is the code snippet of the 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>
}

These all works fine.

The problem

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.

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

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

Qustion

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

---

Addendum

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.

解决方案

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 }] : []);

with:

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

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)) {

with:

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

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屋！