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

我有一个表单，其中包含多个要通过JörnZaeffere出色的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'
}); 

您可以将CSS类添加cancel到“提交”按钮以取消验证

例如

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

请在此处查看此功能的jQuery Validator文档：提交时跳过验证

编辑：

不建议使用上述技术，并已将其替换为formnovalidate属性。

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

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

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

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

另一种（动态）方式：

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

为了重新启用它，我们只需设置默认值即可：

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

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

将formnovalidate属性添加到输入

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

现在不建议添加class =“ cancel”

在此链接上查看有关跳过提交验证的文档

您可以在连接验证时使用onsubmit：false选项（请参阅文档），该验证将在提交表单时进行验证。然后在您的asp：button中添加一个OnClientClick = $（'＃aspnetForm'）。valid（）; 明确检查表单是否有效。

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

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

（的扩展名@lepe和+的@redsquare答案ASP.NET MVCjquery.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按下上面所示的提交按钮。如果Microsoft对此进行了“修复”，则只需删除此代码即可。

    // 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如果您使用按钮提交，则可能需要添加到选择器中）

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

现在正确跳过验证：）

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

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

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

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

我有两个用于表单提交的按钮，名为save和exit的按钮绕过了验证：

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

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

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