我在几个 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 validate 吃表单并且具有无效值的字段在同一个选项卡上时,验证失败(这是正确的)。但是当我在一个选项卡上并且无效值在另一个选项卡上时,验证返回true
,这是不正确的。我该如何解决?如何在另一个选项卡上突出显示该字段?
请看这个演示(只需按下按钮下一步- 它会显示错误消息,然后转到最后一个选项卡并在那里按完成)。