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

Question

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

我的情况：

它与 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'
}); 

Answer 1

您可以添加 CSS 类 cancel 到提交按钮以抑制验证

例如

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

请参阅此处此功能的 jQuery 验证器文档： 跳过提交验证

---

编辑:

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

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

Answer 2

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

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

在按钮的单击事件上（例如）。

Answer 3

另一种（动态）方式：

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

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

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

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

Answer 4

向输入添加 formnovalidate 属性

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

添加 class="cancel" 现已弃用

请参阅有关跳过提交验证的文档 关联

Answer 5

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

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

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

Answer 6

（的扩展 @lepe'沙 @redsquare 回答 ASP.NET MVC + jquery.validate.unobtrusive.js)

---

这 jquery 验证插件 （不是 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 插件的默认行为.

这就是我想出的让你放 .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 如果您使用按钮提交，则选择器）

Answer 7

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

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

另外，请确保您没有任何 input名为“submit”，或者它覆盖名为的函数 submit.

Answer 8

我发现最灵活的方法是使用 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（）;'您绕过验证。

Answer 9

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

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

Answer 10

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

现在正确地跳过验证:)

Answer 11

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

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