我使用jquery验证插件在bootstrap选项卡中验证我的表单,如下所示:
JS:
$(document).ready(function () {
$("form[name=modify]").validate({
highlight: function (label) {
$(label).closest('.form-group').addClass('has-error');
var fieldset = $(label).parent().parent().parent().parent().parent().parent().parent();
if ($(fieldset).find("fieldset.tab-pane.active:has(div.has-error)").length == 0) {
$(fieldset).find("fieldset.tab-pane:has(div.has-error)").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
}
},
debug: true,
ignore: [],
rules: {
first_name: {
required: true,
},
surname: {
required: true
},
id_number: {
required: true
},
mobile_number: {
number: true,
minlength: 10,
},
home_number: {
number: true,
minlength: 10,
},
other_contact: {
number: true,
minlength: 10,
},
line1: {
required: true,
},
city_town: {
required: true,
},
postal_code: {
required: true,
minlength: 4,
},
curr_renumeration: {
required: true,
number: true,
},
expect_renumeration: {
required: true,
number: true
},
email: {
email: true,
required: true,
},
}
});
$("[type=submit]").submit(function (e) {
e.preventDefault();
});
});
在操作中,jquery验证插件工作并验证所有选项卡并显示每个输入的错误底部。我需要显示警告或突出显示标签的标题(即:地址详细信息),如果在标签中是错误的 如何在标题选项卡中显示此警报或突出显示错误?
DEMO HERE
答案 0 :(得分:0)
您应该添加invalidHandler作为Validate方法的参数,如下所示:
invalidHandler: function(form, validator) {
var formId = validator.errorList[0].element.closest('fieldset').id;
var tab = $('[href="#' + formId + '"]');
$(tab).css('color','red');
}
或您想要的任何其他错误效果。