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

前端之家收集整理的这篇文章主要介绍了javascript – 如何正确验证Twitter的Bootstrap表单放置在几个选项卡与jQuery验证?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个表单位于几个Twitter的Bootstrap标签上:
  1. <form id="personal-data" class="form-horizontal">
  2. <div class="tabbable">
  3. <ul id="tab" class="nav nav-tabs">
  4. <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  5. <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
  6. <!-- ... -->
  7. </ul>
  8.  
  9. <div id="myTabContent" class="tab-content">
  10. <div class="tab-pane fade active in" id="home">
  11. <fieldset>
  12. <div class="control-group">
  13. <div class="controls">
  14. <input type="text" id="field1">
  15. </div>
  16. </div>
  17. </fieldset>
  18. </div>
  19. <div class="tab-pane fade" id="profile">
  20. <fieldset>
  21. <div class="control-group">
  22. <div class="controls">
  23. <input type="text" id="field2">
  24. </div>
  25. </div>
  26. </fieldset>
  27. </div>

当我使用jQuery在活动选项卡上验证表单,并且具有无效值的字段在同一个选项卡上时,验证失败(这是正确的).但是当我在一个选项卡上,无效的值在另一个选项卡上时,验证返回true,这是不正确的.我该怎么解决?如何在另一个选项卡上突出显示该字段?

请参阅this demo(只需按下按钮 – 将显示错误消息,然后转到最后一个选项卡,然后按完成).

解决方法

我认为你的问题在于只有在可见元素中进行验证.

阅读这个issue我们看到1.9版本

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

解决了几个意见

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

猜你在找的jQuery相关文章