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

Question

我有一个表单位于几个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,这是不正确的.我该如何解决？如何在另一个标签上突出显示该字段？

请参阅本演示(只需按下按钮,旁边 -它会显示错误信息,然后转到最后一个标签,然后按完成那里).

Answer 1

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

阅读本期我们在版本1.9上看到了这个问题

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

并提出一些解决方案

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

Answer 2

您正在使用这些 jQuery 选项卡吗？您可以停用所有其他选项卡，并在每个表单上提交的数据通过验证时逐渐激活它们。在构造函数中禁用除第一个之外的所有它们，并在每次验证后启用下一个。

.tabs( "enable" , index )

在这里阅读更多内容。

您还可以在最后放置一种最终验证方法，并根据选项卡将所有内容置于可见状态，这样您就可以避免重新加载链接。