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

Question

I have a form that has a multi-div value: I fill in some fields, then I click next, and the current div gets the css proprerty display as "none".

All fields in this form are required, the following is a fragment 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 empty, it will not be submitted and Chrome will give me the following error in the console

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

How can I solve this situation? I thought about catching the error and then showing the first div, but I did not understand how to do this.

Answer 1

I am not getting the same error in Chrome or Firefox. However, I thought that you would need to check by clicking Next, which should make it work:

EXAMPLE

HTML

 <form action="" method="post" id="form1"> <div id="div1" style="display:block;"> <input name="input1" type="text" required /> <input name="input2" type="text" required /> <input type="button" value="next" onclick="Next();" /> </div> <div id="div2" style="display:none;"> <input name="input3" type="text" required /> <input name="input4" type="text" required /> <input type="submit" value="submit" /> </div> </form> 

Js

 function Next() { var blnNext = true; var form = document.getElementById('form1'); var div = document.getElementById('div1'); var inputs = div.querySelectorAll('input[type="text"]'); for (index = 0; index < inputs.length; ++index) { if (!inputs[index].validity.valid) { blnNext = false; form.querySelectorAll('input[type="submit"]')[0].click(); //Force the form to try and submit so we get error messages } } if (blnNext) { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'block'; } } 

Answer 2

instead of the submit button, use the usual button, attach a function to check if all the fields are filled in, and then send this form?

 document.myform.submit(); 

also you can use this to avoid chrome check

 <form action="" method="post" novalidate> 

jsfidle you mean it