JS HTML5 Validate on "display:none" required input elements

I have a form which is multi-div. I mean: i fill some fields, then I click next and current div gets display css proprierty set as "none".

All the fields in this form are required, so this is a snippet of the situation

<form action="" method="post">
    <div id="div1" style="display:none">
        <input name="input1" type"text" required />
        <input name="input2" type"text" required />   
    </div>
    <div id="div2" style="display:block">
        <input name="input3" type"text" required />
        <input name="input4" type"text" required />
        <input type"submit" value="submit" />
    </div>
</form>

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

An invalid form control with name='input1' is not focusable.

So now I would like to know how can I solve this situation. I thought about catching the error and then showing the first div, but didn't figure out how to do this.

Thank you