JQuery 验证插件: 禁用指定提交按钮的验证

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

我的情况:

它与 ASP.NET WebForms 一起使用，但是如果您愿意，可以忽略它。然而，我更多地使用验证作为一个“推荐”: 换句话说，当表单提交时，验证会启动，但不是显示一个“必需的”消息，而是一个“推荐”显示一些东西沿着“你错过了以下字段..。你还想继续吗?”在这个错误容器中，现在可以看到另一个提交按钮，可以按下这个按钮，它将忽略验证并提交。如何规避表单。验证()这个按钮控件，仍然后？

在 http://jquery.bassistance.de/validate/demo/multipart/上的 Buy and Sell a House 示例允许这样做，以便访问以前的链接，但它是通过创建自定义方法并将其添加到验证程序来实现这一点的。我希望不必创建自定义方法来复制验证插件中已有的功能。

下面是我现在得到的即时应用脚本的简化版本:

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'
});
182652 次浏览
小开
最佳答案

您可以向提交按钮添加一个 cancel的 CSS 类来禁止验证

例如:

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

请参阅这个特性的 jQuery Validator 文档: 跳过提交验证

编辑:

上面的技术已经被废弃，代之以 formnovalidate属性。

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

您可以使用 不提交: 错误选项(参见 文件)时，连接验证，将不会验证提交的形式。然后在 asp: 按钮中添加 OnClientClick = $(’# aspnetForm’)。; 显式检查表单是否有效。

您可以称之为 opt-in 模型，而不是上面描述的 opt-out。

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

小开

其他(未记录在案的)方法是:

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

在按钮的 click 事件上(例如)。

小开

(ASP.NET MVC + jquery.validate.unobtrusive.js的 @lepe和 @redsquare答案的扩展)

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)代码有点搞砸了 验证插件的默认行为。

这是我想出来的，让你把 .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添加到选择器中)

小开

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

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

另外，确保没有任何 input命名为“ commit”，或者它覆盖了名为 submit的函数。

小开

向输入添加 formnovalidattribute

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

现在不推荐添加 class = “ Cancel”

有关跳过此 链接上提交的验证，请参阅文档

小开

还有一种(动态的)方式:

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

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

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

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

小开

我发现最灵活的方法是使用 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. proventDefault () ;”，就绕过了验证。

小开

我有两个按钮提交表单，按钮命名为保存和退出绕过验证:

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

现在正确地跳过验证:)

小开

这是最简单的版本，希望它能帮到某人,

$('#cancel-button').click(function() {
var $form = $(this).closest('form');
$form.find('*[data-validation]').attr('data-validation', null);
$form.get(0).submit();
});
小开 
<button type="submit" formnovalidate="formnovalidate">submit</button>

也在工作


提交答案