如何使用jQuery Validate正确验证放置在多个选项卡上的Twitter的Bootstrap表单
How to properly validate Twitter's Bootstrap form placed on several tabs with jQuery Validate?
我有一个表单位于Twitter的几个Bootstrap选项卡上:
<form id="personal-data" class="form-horizontal">
<div class="tabbable">
<ul id="tab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
<!-- ... -->
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<fieldset>
<div class="control-group">
<div class="controls">
<input type="text" id="field1">
</div>
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="profile">
<fieldset>
<div class="control-group">
<div class="controls">
<input type="text" id="field2">
</div>
</div>
</fieldset>
</div>
当我valid
在活动选项卡上使用 jQuery 验证吃表单并且具有无效值的字段位于同一选项卡上时,验证失败(这是正确的)。但是当我在一个选项卡上并且无效值在另一个选项卡上时,验证返回true
,这是不正确的。我该如何解决它?如何在另一个选项卡上突出显示该字段?
请参阅此演示(只需按按钮下一步 - 它将显示错误消息,然后转到最后一个选项卡并按完成)。
您的问题在于验证仅在可见元素中发生。
阅读此问题,我们看到在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选项卡吗?您可以停用所有其他选项卡,并在每个表单上提交的数据通过验证时逐步激活它们。禁用构造函数中除第一个之外的所有它们,并在每次验证后启用下一个。
.tabs( "enable" , index )
在此处阅读更多内容。
您还可以将最终的验证方法放在最后,并根据选项卡将所有内容设置为可见,以便您可以逃避链接的重新加载。
基于@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的解决方案,但您可以在表单元素上使用"无效"事件来捕获HTML5验证错误,并获取焦点元素,找到相应的选项卡窗格,并显示它。
我已经做到了。
$("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 Validing触发无效事件的情况。
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- 从Bootstrap获取活动选项卡ID并将其传递给PHP
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- 如何在angular bootstrap ui中聚焦活动导航选项卡中的拳头输入字段
- jquery点击bootstrap 3选项卡上的事件
- 自动更改 Twitter Bootstrap 选项卡
- 如何创建一个“下一步”按钮,使用 Java 脚本和 Twitter Bootstrap 切换选项卡
- 一旦Bootstrap模式选项已经存在,请更改该选项
- 使用AngularJS在Bootstrap选项卡之间移动DOM元素
- Angular Bootstrap选项卡在单击选项卡后更改url
- Bootstrap 3通过点击按钮添加文本并显示在新选项卡中
- Bootstrap-select.js-选择一个选项后,整个选择将消失
- 在Bootstrap选项卡中操作Nicescroll scrolbar
- AngularJS Bootstrap Tabset 选项卡在 IE8 中不起作用的选项卡之间的选项卡导航
- 禁用 Bootstrap 3 折叠手风琴中的切换选项
- AngularJS bootstrap-ui 选项卡拉入本地 html 内容
- 使用 JavaScript 初始化 bootstrap-markdown 并自定义选项
- 如何使用 Twitter Bootstrap 3 显示选项卡内容
- 使用 jQuery 自动执行 Bootstrap 动态选项卡
- 让选项卡适用于 BootStrap