jQuery Validate 不适用于 Bootstrap 3 选项卡式表单
Posted
技术标签:
【中文标题】jQuery Validate 不适用于 Bootstrap 3 选项卡式表单【英文标题】：jQuery Validate not working on Bootstrap 3 tabbed form 【发布时间】：2013-12-31 23:16:16 【问题描述】：我看过这个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 或 thif ？
【问题讨论】：
【参考方案1】：我认为您的问题可能是默认情况下 jquery 只会验证可见字段。所以你需要做的是告诉 jquery 不要忽略你的隐藏字段（其他选项卡）。这可以按如下方式完成。
$("#form1").validate( ignore: "" );
默认情况下，忽略:hidden。请参阅此答案和此文档（选项 -> 忽略）。
【讨论】：
太好了，很高兴这对您有所帮助【参考方案2】：$("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
);
【讨论】：
【参考方案3】：所以...
我的问题已经解决了……
我不得不稍微调整一下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,
,
);
查看JSFIDDLE
注意：您不需要上面提到的答案中所述的额外功能来交换标签：
// 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
);
我不知道为什么，但你不需要它......无论如何我的工作没有它......
我希望这可以帮助某人。
【讨论】：
以上是关于jQuery Validate 不适用于 Bootstrap 3 选项卡式表单的主要内容，如果未能解决你的问题，请参考以下文章
JQuery Validate 不适用于 Bootstrap Carousel 中的表单
jQuery Validate 不适用于 Bootstrap 3 选项卡式表单
jQuery Validate onclick: false 不适用于复选框或选择