我有一个带有选项卡的表单,以及一个简单的函数,用于在用户在表单选项卡之间移动时验证表单选项卡。 (使用 jQuery、Bootstrap 和 jquery.validate)
标签验证功能
var validateTab = function(element) {
var _element = $(element);
var validatePane = _element.attr('data-target');
var isValid = $(validatePane + ' :input').valid();
var _li = _element.parent();
// console.log(validatePane + " - " + isValid);
if (isValid) {
_li.removeClass('alert-danger');
_li.addClass('alert-success');
} else {
_li.removeClass('alert-success');
_li.addClass('alert-danger');
}
}; // end function validateTab
我当前正在监听 Bootstrap “hidden.bs.tab”事件并调用该函数。
// Validate Tab on tab switch.
$(document).on('hidden.bs.tab', 'a[data-toggle="tab"]', function(e) {
validateTab(e.currentTarget);
});
以上内容按预期工作,但我也想在提交表单时执行此操作。我添加了一个简单的循环来获取每个选项卡并调用 jQuery validate 的 invalidHandler() 中的 validateTab()
invalidHandler: function(event, validator) {
console.log('invalid form');
$('#myForm').append(
'<div class="alert alert-danger alert-dismissable">' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">' +
'×' +
'</button>' +
'<strong>Error: </strong>' +
'<span>Please correct the problems and try again.</span>' +
'</div>'
);
// ADDED THIS CODE AND STARTED RUNNING INTO PROBLEMS.
var $tabs = $('#myTab li a');
$tabs.each(function(key, ele) {
// IF last Tab of form is Valid form submits regardless of other errors.
validateTab(ele);
});
}
这有一个异常(exception)...当最后一个选项卡有效时,即使其他选项卡上有错误,表单也会突然提交。看来调用 valid 会覆盖任何先前的调用或调用 invalidHandler 之前设置的任何内容。整个表单突然提交,就好像它已成功验证一样。
可以在此处找到完整的示例。 https://jsfiddle.net/qcean237/1/
目前 TAB 4 上没有验证,因此即使未提供任何其他必填字段,每次提交表单都会有效。
我是否应该以不同的方式或在不同的位置验证选项卡,以更新提交失败时的选项卡外观?
谢谢, 内森
最佳答案
invalidHandler
仅在表单无效时触发,submitHandler
仅在表单有效时触发。也就是说,您的 validateTab()
函数还会通过调用 .valid()
来触发验证。换句话说,当 invalidHandler
已经知道表单无效时,您会通过使 invalidHandler
检查有效性来破坏插件......这是失败的根源。 invalidHandler
和 submitHandler
仅在确定有效性之后调用...而不是同时调用,否则它无法知道应触发哪个处理程序。
无论如何,只需在单击按钮时运行validateTab()
...
$('button').on('click', function() {
var $tabs = $('#myTab li a');
$tabs.each(function(key, ele) {
validateTab(ele);
});
});
关于javascript - jQuery 验证,在提交时显示有效/无效的表单选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43326700/