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

Question

我已经位于几个Twitter的引导选项卡一种形式：

<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，这是不正确的。我该如何解决它？我如何在另一个选项卡上突出显示该字段？

请参阅this demo（只需按下按钮下一个 - 它会显示错误信息，然后转到最后一个标签，然后按完成那里）。

Answer 1

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

.tabs("enable" , index) 

了解更多here。

您最后还可以放入一个最终的验证方法，并根据标签显示所有内容，以便您可以避免重新加载链接。

Answer 2

我认为你的问题在于验证发生在可见元素中的事实。

阅读本issue我们可以看到，在1.9版本

Fixed #189 - :hidden elements are now ignored by default

和解决一些意见下来

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

Answer 3

我的解决方案，使标签

... 
highlight: function(label) { 
     $(label).closest('.control-group').addClass('error'); 

     $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each(function(){ 
      var id = $(this).attr("id"); 
      $('#tabs a[href="#'+id+'"]').tab('show'); 
     }); 
}, 
... 

是必要的，你添加此代码以允许更改标签由js

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
}); 

Answer 4

在@juanmanuele's answer大厦，这就是我设法得到它与Bootstrap 3 tabs工作：

if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) 
{ 
    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab) 
    { 
     var id = $(tab).attr("id"); 

     $('a[href="#' + id + '"]').tab('show'); 
    }); 
} 

为了将重点放在第一个输入错误：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{ 
    e.target // activated tab 

    $($(e.target).attr('href')).find("div.has-error :input:first").focus(); 

    //e.relatedTarget // previous tab 
}); 

Answer 5

不完全的解决方案对于jQuery Validate，但您可以在表单元素上使用“无效”事件，捕获HTML5验证错误，并获取焦点元素，分别找到标签页并显示它。

我已经这样做了。

$("form").find("input, select").on("invalid", function() { 
    var id = $(this).parents(".tab-pane").attr("id"); 

    $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show"); 
}); 

希望这可以帮助你。同样，这是针对HTML5的，或者如果jQuery Validate触发无效事件。

Answer 6

感谢您的代码，它解决了我的大部分问题，除了导航到带有错误的第一个选项卡的部分。我身边如下：

 var IsValid = true; 

     // Validate Each Bootstrap tab 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       IsValid = false; 
      } 
     }); 

     // Show first tab with error 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       return false; // Break each loop 
      } 
     });