Google Chrome cannot submit a form displaying: none

Question

The submit button on this form does nothing unless I remove style="display:none" from the div template=row . Why??

(the name each form control is dynamically populated with javascript, however, to simplify troubleshooting, I ran the form without javascript, and the problem boils down to whether there is a display tag there).

Here's what the Chrome console says:

 bundleAn invalid form control with name='' is not focusable. bundleAn invalid form control with name='label' is not focusable. bundleAn invalid form control with name='unique' is not focusable 

HTML:

 <form method="POST" action="/add/bundle"> <p> <input type="text" name="singular" placeholder="Singular Name" required> <input type="text" name="plural" placeholder="Plural Name" required> </p> <h4>Asset Fields</h4> <div class="template-view" id="template_row" style="display:none"> <input type="text" data-keyname="name" placeholder="Field Name"> <input type="text" data-keyname="hint" placeholder="Hint"> <select data-keyname="fieldtype" required> <option value="">Field Type...</option> </select> <input type="checkbox" data-keyname="required" value="true"> Required <input type="checkbox" data-keyname="search" value="true"> Searchable <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete <input type="radio" data-keyname="label" value="label" name="label" required> Label <input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique <button class="add" type="button">+</button> <button class="remove" type="button">-</button> </div> <div id="target_list"></div> <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> </form> 

Answer 1

It seems that the reason is HTML 5 constraint checking - this is the require attribute. Chrome began to support this with the latest versions.

This seems like a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for the submit button.

I guess this is actually a security feature that prevents the sending of alleged user data by sending manipulated, hidden content, these quotes in this direction:

If one of the controls is not displayed (for example, it has a hidden set of attributes), user agents may report a script error.

Your inputs are of type text , so their goal is to allow users to enter data, and their content when hiding is something that the user probably does not want.

If you still want to send hidden inputs when using client validation, I would suggest using <input type="hidden"> instead - I could assume that there is no error when validating because they are designed for invisibility.

Answer 2

I did a JSFiddle to study your problem here , and I managed to fix it by adding checked to your radio stream inputs, such as: <input type="radio" data-keyname="label" value="label" name="label" required checked> . In the above code, the radio buttons are not checked, but since they are marked as required , the form does not pass the check and Chrome refuses to submit the form.