当我在活动选项卡上使用jQuery validatevalidation表单时，在同一选项卡上使用无效值的字段，则validation失败（这是正确的）。 但是当我在一个选项卡上并且无效值在另一个选项卡上时，validation返回true ，这是不正确的。 我该如何解决？ 如何在另一个标签上突出显示该字段？
请看这个演示 （只需按下按钮 – 它将显示错误信息，然后转到最后一个标签并按完成那里）。
我认为您的问题在于validation仅在可见元素中发生。
阅读本期我们在版本1.9上看到了这个问题
已修复＃189 – ：隐藏元素现在默认被忽略
并解决了一些评论
$.validator.setDefaults({ ignore: "" });
我的解决方案启用标签
... highlight: function(label) { $(label).closest('.control-group').addClass('error'); $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each( function(){ var id = $(this).attr("id"); $('#tabs a[href="#'+id+'"]').tab('show'); }); }, ...
您需要添加此代码以允许js更改选项卡
$('a[data-toggle="tab"]').on('shown', function (e) { e.target // activated tab e.relatedTarget // previous tab });
感谢您的代码，它解决了我的大多数问题，除了导航到第一个选项卡有错误的部分。 我得到如下：
var IsValid = true; // Validate Each Bootstrap tab $(".tab-content").find("div.tab-pane").each(function (index, tab) { var id = $(tab).attr("id"); $('a[href="#' + id + '"]').tab('show'); var IsTabValid = $("#SomeForm").valid(); if (!IsTabValid) { IsValid = false; } }); // Show first tab with error $(".tab-content").find("div.tab-pane").each(function (index, tab) { var id = $(tab).attr("id"); $('a[href="#' + id + '"]').tab('show'); var IsTabValid = $("#SomeForm").valid(); if (!IsTabValid) { return false; // Break each loop } });
你正在使用这些jQuery标签吗？ 您可以停用所有其他选项卡并逐步激活它们，同时每个表单上的提交数据都通过validation。 除了构造函数中的第一个以外，禁用它们，并在每次validation后启用下一个。
.tabs( "enable" , index )
在这里阅读更多。
您还可以在最后放置一个最终validation方法，并根据选项卡显示所有内容，以便您可以转义重新加载链接。
基于@ juanmanuele的回答 ，这就是我设法使用Bootstrap 3标签的方法 ：
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'); }); }
要将焦点放在第一个输入上并显示错误：
$('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的解决方案，但您可以在表单元素上使用“invalid”事件，捕获HTML5validation错误，并获取焦点元素，分别找到选项卡窗格并显示它。
我做到了这一点。
$("form").find("input, select").on("invalid", function() { var id = $(this).parents(".tab-pane").attr("id"); $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show"); });
希望这对你有所帮助。 同样，这适用于HTML5或jQuery Validate触发无效事件。