我看过这个question/answer，还有更多喜欢它，但我仍然无法通过切换标签或移动到错误的标签进行表单验证。
相关的jQuery：
$(document).ready(function () {
$("form[name=modify]").validate({
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,
},
highlight: function (label) {
$(label).closest('.control-group').addClass('has-error');
console.log($(label).closest('.control-group').addClass('has-error'));
if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) {
$(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
$('#myTab').on('shown', function (e) {
console.log(this);
e.target // activated tab
$($(e.target).attr('href')).find("div.has-error :input:first").focus();
});
}
},
}
});
$("[type=submit]").submit(function (e) {
e.preventDefault();
});
});
您可以查看here
我错过了什么？
有人可以帮帮我吗？我无法让它发挥作用。
更新
好的，所以我移动了一些代码并玩了一下：
$("form[name=modify]").validate({
highlight : function(label) {
$(label).closest('.form-group').addClass('has-error');
$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {
alert("error from if");
if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
alert("error from each");
var id = $(tab).attr("id");
console.log(id);
$('a[href="#' + id + '"]').tab('show');
}
});
},
invalidHandler : function(event, validator) {
// 'this' refers to the form
$('#myTab').on('shown', function(e) {
console.log(this);
e.target;// activated tab
$($(e.target).attr('href')).find("fieldset.has-error :input:first").focus();
});
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
$("div.has-error span").html(message);
$("div.has-error").show();
} else {
$("div.has-error").hide();
}
},
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,
},
}
});
一切顺利，但在此行if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
如果我用$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {将其翻转，它也会停止......
更新了jsFiddle
为什么不进入.each或if？
答案 0 :(得分：12)
我认为您的麻烦可能是默认情况下jquery只会验证可见字段。所以你需要做的是告诉jquery不要忽略你的隐藏字段（其他标签）。这可以按如下方式完成。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>Client: Morton</p>
<p>Total: 64</p>
<p>Client: Mingus</p>
<p>Total: 83</p>
</body>
</html>
默认情况下，忽略$("#form1").validate({ ignore: "" });
。请参阅此答案和本文档（选项 - ＆gt;忽略）。
答案 1 :(得分：9)
$("form").on('submit', function () {
var isValid = $(this).valid();
if (this.hasChildNodes('.nav.nav-tabs')) {
var validator = $(this).validate();
$(this).find("input").each(function () {
if (!validator.element(this)) {
isValid = false;
$('a[href=#' + $(this).closest('.tab-pane:not(.active)').attr('id') + ']').tab('show');
return false;
}
});
}
if (isValid) {
// do stuff
}
});
答案 2 :(得分：1)
因此...
我已经解决了我的问题...
我不得不稍微调整answer。
我的解决方案是：
在$("form[name=modify]").validate({})内，我调用了一个名为highlight的函数，
我没有使用$(".tab-content")，而是使用参数label来创建变量：
var tab_content=$(label).parent().parent().parent().parent().parent().parent().parent();
也许不是最有效的方法，也不是最好的方法......但它有效..
我还从此行中删除了:hidden：
$(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
这是完整的功能：
$("form[name=modify]").validate({
highlight : function(label) {
$(label).closest('.form-group').addClass('has-error');
var tab_content= $(label).parent().parent().parent().parent().parent().parent().parent();
if ($(tab_content).find("fieldset.tab-pane.active:has(div.has-error)").length == 0) {
$(tab_content).find("fieldset.tab-pane:has(div.has-error)").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
}
},
ignore : [], // <-- this is important
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,
},
}
});
注意：您不需要额外的功能来交换标签，如上面提到的答案中所述：
// Don't need this
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
e.target // activated tab
$($(e.target).attr('href')).find("div.has-error :input:first").focus();
//e.relatedTarget // previous tab
});
我不知道为什么，但你不需要它......无论如何我的工作都没有......
我希望这可以帮助别人。