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

Posted 2023-05-09

【中文标题】jQuery Validation 插件：禁用对指定提交按钮的验证

【英文标题】：jQuery Validation plugin: disable validation for specified submit buttons

【发布时间】：2010-09-17 06:13:32

【问题描述】：

我有一个包含多个字段的表单，我正在使用 Jörn Zaeffere 出色的 jQuery Validation 插件进行验证（有些添加了用于自定义验证的方法）。您如何规避使用指定提交控件的验证（换句话说，使用某些提交输入触发验证，但不触发其他输入验证）？这类似于带有标准 ASP.NET 验证器控件的 ValidationGroups。

我的情况：

它与 ASP.NET WebForms 一起使用，但如果您愿意，可以忽略它。但是，我更多地将验证用作“推荐”：换句话说，当提交表单时，验证会触发，但不是显示“必需”消息，而是显示“推荐”，其中包含“你错过了以下字段....您仍然要继续吗？”那时，在错误容器中，现在可以看到另一个提交按钮，可以按下该按钮，它会忽略验证并提交。如何绕过此按钮控件的表单 .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 at button，这样它就不会离开technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

【参考方案1】：

您可以将cancel 的 CSS 类添加到提交按钮以禁止验证

例如

<input class="cancel" type="submit" value="Save" />

在此处查看此功能的 jQuery Validator 文档：Skipping validation on submit

---

编辑：

上述技术已被弃用并替换为formnovalidate 属性。

<input formnovalidate="formnovalidate" type="submit" value="Save" />

【讨论】：

它与 一起工作吗？我添加了 class="cancel" 但它不起作用。我将 MVC2 与 MicrosoftMvcValidation 一起使用。谢谢。

@VinnyG - 未使用 MicrosoftMvcValidation（并且永远不会） - 这与 jquery validate 不同。

是否可以在没有输入元素的情况下实现相同的行为？即我可以以某种方式触发（以记录的方式，与 lepe 的回答相反）表单提交并同时跳过验证吗？

注意：如果您动态添加类取消，即$('input[type=submit]').addClass('cancel')，则这不起作用，该类必须在页面加载时出现。

@lolesque 你可能需要再次调用验证方法，除非他们改变了它的工作方式，请注意这个答案上的日期）

【参考方案2】：

其他（未记录的）方法是调用：

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

关于按钮的点击事件（例如）。

【讨论】：

你好@lepe，你知道在写$("form").validate().cancelSubmit = true;之后如何重新应用jquery验证。我尝试了$("form").validate().cancelSubmit = false; 并在提交我的提交按钮时调用$("form").validate();。谢谢

可以像$(yourForm).data('validator').cancelSubmit = false;一样做谢谢

【参考方案3】：

另一种（动态）方式：

$("form").validate().settings.ignore = "*";

要重新启用它，我们只需设置回默认值：

$("form").validate().settings.ignore = ":hidden";

来源：https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

【参考方案4】：

将 formnovalidate 属性添加到输入

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

现在不推荐添加 class="cancel"

请参阅linklink 上提交时跳过验证的文档

【参考方案5】：

您可以在连接验证时使用 onsubmit:false 选项（请参阅documentation），该验证不会在提交表单时进行验证。然后在你的 asp:button 中添加一个 OnClientClick= $('#aspnetForm').valid();明确检查表单是否有效。

您可以将此称为选择加入模型，而不是上述选择退出。

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

【参考方案6】：

（@lepe's 和 @redsquare 的扩展名ASP.NET MVC + jquery.validate.unobtrusive.js）

---

jquery validation plugin（不是 Microsoft 不显眼的那个）允许您在提交按钮上放置一个 .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 plugin's default behavior。

这就是我想出的让您将.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）

【讨论】：

为了一个该死的Pay with PayPal 提交按钮花了 4 个小时的时间

这对我来说不适用于默认的 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"));

在某处已修复。我已经能够完全注释掉它，它现在可以与.cancel 类一起使用。注意：如果您使用 type='image' 提交按钮，则 .cancel 类将不起作用，除非您在 jquery 原始验证插件中将 ":submit" 更改为 ":submit,:image"

【参考方案7】：

$("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";

【参考方案8】：

这个问题很老，但我发现另一种解决方法是使用$('#formId')[0].submit()，它获取 dom 元素而不是 jQuery 对象，从而绕过任何验证钩子。此按钮提交包含输入的父表单。

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

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

【参考方案9】：

我发现最灵活的方法是使用 JQuery 的：

event.preventDefault():

例如如果我不想提交我想重定向，我可以这样做：

$("#redirectButton").click(function( event ) 
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
);

或者我可以将数据发送到不同的端点（例如，如果我想更改操作）：

$("#saveButton").click(function( event ) 
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() 
    ).done(function() 
        alert("Data sent!");
    ).fail(function(jqXHR, textStatus, errorThrown) 
        alert("Ooops, we have an error");
    )

一旦你做了'event.preventDefault();'你绕过验证。

【参考方案10】：

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

$('.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();
);

【参考方案11】：

<button type="submit" formnovalidate="formnovalidate">submit</button>

还在工作

【参考方案12】：

这里是最简单的版本，希望对大家有所帮助，

$('#cancel-button').click(function() 
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
);