我在几个 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>
当我在事件选项卡上使用 jQuery 验证验证
表单,并且具有无效值的字段位于同一选项卡上时,验证失败(这是正确的)。但是当我在一个选项卡上而无效值在另一个选项卡上时,验证返回 true
,这是不正确的。我该如何解决?如何在另一个选项卡上突出显示该字段?
请参阅this demo (只需按下按钮 next - 它会显示错误消息,然后转到最后一个选项卡并在那里按下 finish)。
最佳答案
我认为您的问题在于验证仅发生在可见元素中。
阅读此 issue我们在 1.9 版中看到了这一点
Fixed #189 - :hidden elements are now ignored by default
和一个解决方案,下面有一些评论
$.validator.setDefaults({
ignore: ""
});
关于javascript - 如何使用 jQuery Validate 正确验证放置在多个选项卡上的 Twitter 的 Bootstrap 表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10145131/