javascript - Bootstrap 3 Tabs 和 HTML5 表单验证

Question

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

HTML5 promise 提供一个优雅的解决方案。但是 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

最恼人的问题是，人们会认为 chrome(或任何其他有此问题的浏览器)会在执行任何操作之前检查其是否可见，但就像美好的“ol Internet Explorer 时代一样，人们必须破解浏览器问题..

$(document).on('shown.bs.tab','a[data-toggle="tab"]',function(e){
    $(':input[required]:hidden').removeAttr('required').addClass('wasrequired');
    $('.wasrequired:visible').removeClass('wasrequired').prop('required', 'required');
})

我不想修改我的代码中的任何内容，但另一种解决方案是添加一个 class='required' 这样我们就不需要使用 'wasrequired' 作为 tmp 解决方案。

我还必须在选择器中添加我的表单类 .form-ajax，因为我的表单在选项卡范围之外。