logo标签列表

jQuery验证插件：禁用指定提交按钮的验证

jqueryjquery-validate
172
我有一个表单，其中包含多个字段，我正在使用Jörn Zaeffere的出色jQuery验证插件进行验证（一些方法用于自定义验证）。如何使用指定的提交控件绕过验证（换句话说，使用某些提交输入触发验证，但不使用其他输入触发验证）？这类似于标准ASP.NET验证器控件中的ValidationGroups。
我的情况：
这是与ASP.NET WebForms一起使用的，但如果您愿意，可以忽略它。但是，我更多地将验证用作“建议”：换句话说，当提交表单时，会触发验证，但是不会显示“必填”消息，而是显示“建议”消息，内容大致为“您错过了以下字段...您是否仍要继续？”此时，在错误容器中会显示另一个提交按钮，可以按下该按钮以忽略验证并仍然提交。如何绕过此按钮控件的.forms .validate（），并仍然发布？
在http://jquery.bassistance.de/validate/demo/multipart/的“购买和出售房屋示例”中，为了点击前面的链接，可以通过创建自定义方法并将其添加到验证器来实现此目的。我希望不必创建重复验证插件中已有功能的自定义方法。
以下是我现在拥有的适用脚本的简短版本：
var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
});
还要在按钮上指定关键字“return”，这样它就不会导航离开了。http://technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134 - user567799
12个回答
298
你可以将 CSS 类 cancel 添加到提交按钮上以抑制验证。
例如：
<input class="cancel" type="submit" value="Save" />

参见 jQuery Validator 的文档，了解此功能的详细信息：Skipping validation on submit

注意:

上述技术已被废弃，使用 formnovalidate 属性替代。

<input formnovalidate="formnovalidate" type="submit" value="Save" />
1
它可以与 <input /> 一起使用吗？我添加了 class="cancel"，但它没有起作用。我正在使用 MicrosoftMvcValidation 的 MVC2。谢谢。 - VinnyG
4
@VinnyG从未使用过MicrosoftMvcValidation（而且永远不会），这与jQuery Validate不同。 - redsquare
1
有没有可能在没有输入元素的情况下实现相同的行为？也就是说，我是否可以以某种记录的方式触发表单提交并同时跳过验证（与lepe的答案相反）？ - ivan
11
请注意：如果您在页面加载后动态添加类别“cancel”，例如 $('input[type=submit]').addClass('cancel')，则此方法将不起作用。该类必须在页面加载时就存在。 - lolesque
@lolesque 你可能需要再次调用验证方法，除非他们已经改变了它的工作方式（请注意此答案的日期）。 - redsquare
109

另一种（未记录的）方法是调用：

$("form").validate().cancelSubmit = true;
你好@lepe，你知道如何在写了$("form").validate().cancelSubmit = true;之后重新应用jquery验证吗？我尝试了$("form").validate().cancelSubmit = false;并在提交按钮上调用$("form").validate();。谢谢。 - Jaikrat
3
可以这样做：$(yourForm).data('validator').cancelSubmit = false;。 - Jaikrat
23
17

在输入框中添加formnovalidate属性

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel">

现在添加class="cancel"已经被弃用

请查看此链接上的文档，了解如何跳过提交时的验证。

10

当设置了验证时，您可以使用 onsubmit:false 选项（请参见文档）来不在表单提交时进行验证。然后在您的 asp:button 中添加 OnClientClick= $('#aspnetForm').valid(); 来明确检查表单是否有效。

您可以称之为选择模型，而不是上面描述的选择退出模型。

注意，我还在使用 ASP.NET WebForms 的 jquery 验证。虽然有些问题需要解决，但一旦解决，用户体验非常好。

3
（对于@lepe和@redsquare关于ASP.NET MVC + jquery.validate.unobtrusive.js的回答的扩展）

jQuery验证插件（不是微软的非侵入式插件）允许您在提交按钮上放置.cancel类，以完全绕过验证（如已接受的答案所示）。

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

请勿将此与type='reset'混淆，它完全不同。

不幸的是，jquery.validation.unobtrusive.js验证处理（ASP.NET MVC）代码有点破坏了jquery.validate插件的默认行为。

这就是我想出来的方法，让您可以像上面所示一样在提交按钮上放置.cancel。如果微软以后“修复”了这个问题，那么您可以删除此代码。

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

注意：如果第一次尝试时似乎无法正常工作，请确保您没有往返于服务器并查看带有错误的服务器生成页面。您需要通过其他方式绕过服务器端的验证 - 这只是允许在客户端提交表单而没有错误（另一种选择是将 .ignore 属性添加到表单中的所有内容）。
（注意：如果您正在使用按钮提交，则可能需要将 button 添加到选择器中）
这是与编程有关的内容，翻译成中文：这真是让人抓狂，为了一个该死的“通过PayPal支付”提交按钮，竟然浪费了4个小时的时间。 - Simon_Weaver
这对我在默认的MVC 5模板中没有起作用。我有Nuget包JQuery 1.10.2，JQuery Validation 1.11.1，Microsoft jQuery Unobtrusive Validation 3.0.0。对我有用的是用以下代码替换你的代码中的两行：$(this).closest('form').data("validator", null).unbind().submit(); 这将把验证器设置为null并解除绑定。之后它会提交表单。您可以通过此行重置验证：$.validator.unobtrusive.parse($("#YourUniqueFormId")); - LockTar
在某个地方，这个问题已经被修复了。我已经完全注释掉它，并且现在使用.cancel类可以正常工作。注意：如果您正在使用type='image'的提交按钮，则除非您将“：submit”更改为“：submit，：image”，否则.cancel类将无法起作用。这是在jQuery原始验证插件中的说明。 - Simon_Weaver
2
$("form").validate().settings.ignore = "*";

或者

$("form").validate().cancelSubmit = true;

但是在自定义所需验证器方面没有成功。为了动态调用提交，我使用以下代码创建了一个虚假的隐藏提交按钮：

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

现在正确跳过验证 :)
如果您只想排除特定的类别不进行验证，您可以使用该类别名称替换星号。$("form").validate().settings.ignore = "class-name"; - James Poulose
2
<button type="submit" formnovalidate="formnovalidate">submit</button>

同样适用于工作

1
这个问题很旧了，但是我发现另一种解决方法是使用$('#formId')[0].submit()，它获取 dom 元素而不是 jQuery 对象，从而绕过任何验证钩子。此按钮提交包含输入的父表单。
<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

此外，请确保您没有任何名为“submit”的input，否则它会覆盖名为submit的函数。
1

我有两个按钮用于表单提交，名为“保存”和“退出”的按钮可以绕过验证：

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接