jQuery的不显眼的审定忽略＆QUOT;取消]类上如果阿贾克斯形式使用提交按钮 [英] jQuery unobtrusive validation ignores "cancel" class on submit button if used in Ajax form

问题描述

我试图用，以实现可选的客户端验证

I am trying to implement optional client side validation using

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

现在我们点击保存。因为我们的文字的的名字@ 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.

这第二个按钮是仅仅有正常的提交按钮类=取消。这指示 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.

下面是该视图的code片断：

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.

第二个提交按钮 - 保存反正停止，如果我切换到Ajax的形式，预期工作。它只是行为就像正常的一个，prevents提交，直到验证成功。

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.

下面是Ajax化观点的code片断：

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.

要拥有的客户端验证是绝对必要的。服务器端验证是不是一种选择。除了更高的流量（此示例是一种简化 - 真正的形式包含更多的字段）和延迟，有一件事情是服务器端验证不会做：客户端验证突出显示失去焦点错误的领域。这意味着你只要有一个反馈，你Tab键切换到下一个字段。

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.

推荐答案

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

因此​​，如果使用类名称提交按钮取消被用来提交表单，这个客户端验证不再触发。另一种可能性是刮 jquery.unobtrusive-ajax.js 脚本，并用标准的更换你的 Ajax.BeginForm Html.BeginForm ，你可以悄悄地AJAXify使用老式的jQuery。

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的不显眼的审定忽略＆QUOT;取消]类上如果阿贾克斯形式使用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！