javascript – 如何正确验证Twitter的Bootstrap表单放置在几个选项卡与jQuery验证？

<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(只需按下按钮 – 将显示错误消息,然后转到最后一个选项卡,然后按完成).