jQuery 验证插件:禁用对指定提交按钮的验证
-
03-07-2019 - |
题
我有一个包含多个字段的表单,我正在使用 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'
});
解决方案
您可以添加 CSS 类 cancel
到提交按钮以抑制验证
例如
<input class="cancel" type="submit" value="Save" />
请参阅此处此功能的 jQuery 验证器文档: 跳过提交验证
编辑:
上述技术已被弃用并替换为 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" 现已弃用
请参阅有关跳过提交验证的文档 关联
您可以使用 提交时:假 选项(参见 文档)在连接验证时,该验证不会在提交表单时验证。然后在你的 asp:button 中添加一个 OnClientClick= $('#aspnetForm').valid();明确检查表单是否有效。
您可以将其称为选择加入模型,而不是上述的选择退出模型。
请注意,我还在 ASP.NET WebForms 中使用 jquery 验证。有一些问题需要解决,但一旦解决了,用户体验就会非常好。
(的扩展 @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
如果您使用按钮提交,则选择器)
这个问题很老了,但我发现另一种解决方法是使用 $('#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_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();
});