title: Bootstrap 3 Tabs and HTML5 form validation
body: <p>Classic problem of validating an element that is on a hidden tab. I've read a hundred posts with complex workarounds. Does anyone have a simpler, more elegant solution that works in a generic case? i.e. not coded specifically to each form?</p>
  
  <p>HTML5 promises an elegant solution. But Tabs bugger it up...</p>
  
  <p>Thanks</p>
  
  <p>More..? From the Bootstrap examples. If you have fields marked "required" (HTML5 validation), the validation will not work for the non-active (hidden) tabs. And I believe other javascript validation techniques also fail with tabs.</p>
  
  <p>I'm hoping someone has nice a generic technique to solution which does not require witing into the code on every page. HTML5 validation is nice and clean - until you add tabs...</p>
  
  <p>It won't submit. But it won't give an error either...</p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="home"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane" id="profile"&gt;...
      &lt;input type="text" name="name" required&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="messages"&gt;...
      &lt;input type="text" name="address" required&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="settings"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>