JS HTML5 Validate on "display:none" required input elements <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> <pre><code>An invalid form control with name='input1' is not focusable. </code></pre> <p>I would like to know 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> <p>Thank you</p>