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

问题描述

我在几个Twitter的Bootstrap选项卡上都有一个表单:

I have one form located on several Twitter's Bootstrap tabs:

<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，这是不正确的.我该如何解决?如何在另一个标签上突出显示该字段?

When I validate the form with jQuery validate on active tab and field with invalid value is on the same tab, then validation fails (which is correct). But when I am on one tab and invalid value is on another tab, then validation returns true, which is incorrect. How can I fix it? How can I highlight that field on another tab?

请参见此演示(只需按下按钮 next -它会显示错误消息，然后转到到最后一个标签，然后在其中按完成.

Please see this demo (just press button next - it will show error message, then go to last tab and press finish there).

推荐答案

我认为您的问题在于验证仅在可见元素中进行.

I think your problem lies in the fact that validation occurs in visible elements only.

阅读此问题时，我们会在1.9版上看到

Reading this issue we see that on version 1.9

和一些注释掉的解决方案

and a solution a few comments down

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

这篇关于如何使用jQuery Validate正确验证放置在多个选项卡上的Twitter的Bootstrap表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！