Bootstrap 3选项卡和HTML5表单验证

Question

验证隐藏选项卡上的元素的经典问题.我已经阅读了一百篇包含复杂解决方法的帖子.有没有人有一个更简单,更优雅的解决方案,适用于一般案例？即没有专门针对每种形式编码？

HTML5承诺提供优雅的解决方案.但是Tabs开玩笑了......

谢谢

更多..？从Bootstrap示例.如果您有标记为"必需"的字段(HTML5验证),则验证将不适用于非活动(隐藏)选项卡.而且我相信其他javascript验证技术也会失败并带有标签.

我希望有人有一个很好的通用技术解决方案,不需要在每个页面上的代码.HTML5验证很好很干净 - 直到你添加标签...

它不会提交.但它不会给出错误......

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...
    <input type="text" name="name" required>
  </div>
  <div class="tab-pane" id="messages">...
    <input type="text" name="address" required>
  </div>
  <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

我放弃了 HTML5 验证......也许在未来。但它仍然存在一些问题。

我现在使用“Bootstrap Validator”（ http://bootstrapvalidator.com/ ）运气很好。它可以很好地处理选项卡，响应 HTML5 验证标签，并且有很多验证器。仍然很新，但似乎正在积极开展工作。进行得顺利。