Question

验证隐藏选项卡上的元素的经典问题。我已经阅读了一百篇包含复杂解决方法的帖子。有没有人有一个更简单，更优雅的解决方案，适用于一般案例？即没有特别编码到每个表格？

HTML5承诺提供优雅的解决方案。但是Tabs把它搞砸了......

由于

更多..？从Bootstrap示例。如果您有标记为＆＃34; required＆＃34; （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（或任何其他有这个问题的浏览器）会在做任何事情之前检查它是否可见，但就像好的'互联网资源管理器日那样，必须解决浏览器问题......

$(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，因为我的表单在选项卡范围之外。

Answer 2

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

我现在好运使用＆＃34; Bootstrap Validator＆＃34; （http://bootstrapvalidator.com/）。它适用于标签，响应HTML5验证标签，并有很多验证器。仍然很新，但它似乎积极工作。它进展顺利。

Answer 3

您可以使用HTML5新功能

输入表格属性

form属性指定一个或多个表单元素   属于。

示例根据http://www.w3schools.com/

位于HTML表单外部的输入字段（但仍然是表单的一部分）：

<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">   
 </form>

 Last name: <input type="text" name="lname" form="form1">

有关详细信息，请参阅此W3School

Bootstrap 3选项卡和HTML5表单验证

3 个答案: