Question

我有一个包含多个字段的表单，我正在使用JörnZaeffere的优秀jQuery Validation插件验证（其中一些字段添加了用于自定义验证的方法）。如何规避使用指定的提交控件进行验证（换句话说，使用一些提交输入进行激活验证，但不要与其他人一起激活验证）？这与具有标准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

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

e.g

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

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

修改：

上述技术已被弃用，并替换为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 =＆＃34;取消＆＃34;现已弃用

请参阅此link

上有关提交时跳过验证的文档

Answer 5

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

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

注意，我也在使用ASP.NET WebForms进行jquery验证。有一些问题需要解决，但一旦通过它们，用户体验就非常好。

Answer 6

（对@lepe + @redsquare的{{1}}和ASP.NET MVC答案的延伸

jquery validation plugin（不是微软不引人注目的）允许您在提交按钮上放置jquery.validate.unobtrusive.js课程以完全绕过验证（如接受的答案中所示）。

.cancel

（不要将此与type='reset'混淆，这是完全不同的事情）

不幸的是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"/>验证处理（ASP.NET MVC）代码搞砸了jquery.validate plugin's default behavior。

这就是我提出的允许您将jquery.validation.unobtrusive.js放在提交按钮上的内容，如上所示。如果微软“修复”了这个问题，那么你可以直接删除这段代码。

.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添加到选择器中

Answer 7

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

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

另外，请确保您没有input名为＆＃34;提交＆＃34;或者它会覆盖名为submit的函数。

Answer 8

我发现最灵活的方法是使用JQuery＆＃39; s：

event.preventDefault():

E.g。如果不是提交我想重定向，我可以这样做：

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

一旦你做了事情.preventDefault（）;＆＃39;你绕过验证。

Answer 9

我有两个表单提交按钮，名为save的按钮和退出旁边的验证：

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

Answer 12

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

也可以工作

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

12 个答案: