title: JS HTML5 Validate on "display:none" required input elements
body: <p>I have a form which is a multi-div meaning: I fill some fields, then I click next and current div gets to display css proprerty set as "none".</p>
  
  <p>All the fields in this form are required, below is a snippet of the situation:</p>
  
  <pre><code>&lt;form action="" method="post"&gt;
      &lt;div id="div1" style="display:none"&gt;
          &lt;input name="input1" type"text" required /&gt;
          &lt;input name="input2" type"text" required /&gt;   
      &lt;/div&gt;
      &lt;div id="div2" style="display:block"&gt;
          &lt;input name="input3" type"text" required /&gt;
          &lt;input name="input4" type"text" required /&gt;
          &lt;input type"submit" value="submit" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now the problem is that, when I submit the form, if one field of the first div is not filled up, it won't submit and Chrome gives me the following error in the Console</p>
  
  <blockquote>
    <p>An invalid form control with name='input1' is not focusable.</p>
  </blockquote>
  
  <p>How can I solve this situation? I've thought about catching the error and then showing the first div, but I haven't figured out how to do it.</p>