如何使用 jQuery Validate 正确验证放置在多个选项卡上的 Twitter Bootstrap 表单？

我有一个表单位于多个 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>

When I valid使用 jQuery 在活动选项卡上验证表单，并且具有无效值的字段位于同一选项卡上，然后验证失败（这是正确的）。但是，当我在一个选项卡上并且无效值在另一选项卡上时，验证将返回true，这是不正确的。我该如何修复它？如何在另一个选项卡上突出显示该字段？

请参见这个演示 http://jsbin.com/emozep/2（只需按按钮next- 它将显示错误消息，然后转到最后一个选项卡并按finish there).

我认为您的问题在于验证仅发生在可见元素中。

读这篇文章issue https://github.com/jzaefferer/jquery-validation/issues/279我们在 1.9 版本上看到

修复了 #189 - :隐藏元素现在默认被忽略

和一个解决方案，下面有一些评论

$.validator.setDefaults({
    ignore: ""
});