"Invalid form control" only in Google Chrome

Question

The code below works well in Safari but in Chrome and Firefox the form will not submit. Chrome console logs the error An invalid form control with name='' is not focusable. Any ideas?

Note that whilst the controls below do not have names, they should have names at the time of submission, populated by the Javascript below. The form DOES work in Safari.

<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" required>      <input type="text" data-keyname="hint" placeholder="Hint">      <select data-keyname="fieldtype" required>          <option value="">Field Type...</option>          <option value="Email">Email</option>          <option value="Password">Password</option>          <option value="Text">Text</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"> Label     <input type="radio" data-keyname="unique" value="unique" name="unique"> 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>  <script>  function addDiv() {     var pCount = $('.template-view', '#target_list').length;     var pClone = $('#template_row').clone();     $('select, input, textarea', pClone).each(function(idx, el){         $el = $(this);         if ((el).type == 'radio'){             $el.attr('value', pCount + '_' + $el.data('keyname'));         }         else {             $el.attr('name', pCount + '_' + $el.data('keyname'));         };     });     $('#target_list').append(pClone);     pClone.show(); }  function removeDiv(elem){     var pCount = $('.template-view', '#target_list').length;     if (pCount != 1)     {         $(elem).closest('.template-view').remove();     } };  $('.add').live('click', function(){     addDiv(); });  $('.remove').live('click', function(){     removeDiv(this); });  $(document).ready(addDiv);  </script> 

Answer 1

Chrome wants to focus on a control that is required but still empty so that it can pop up the message 'Please fill out this field'. However, if the control is hidden at the point that Chrome wants to pop up the message, that is at the time of form submission, Chrome can't focus on the control because it is hidden, therefore the form won't submit.

So, to get around the problem, when a control is hidden by javascript, we also must remove the 'required' attribute from that control.

Answer 2

It will show that message if you have code like this:

<form>   <div style="display: none;">     <input name="test" type="text" required/>   </div>    <input type="submit"/> </form> 

solution to this problem will depend on how the site should work

for example if you don't want the form to submit unless this field is required you should disable the submit button

so the js code to show the div should enable the submit button as well

you can hide the button too (should be disabled and hidden because if it's hidden but not disabled the user can submit the form with others way like press enter in any other field but if the button is disabled this won't happen

if you want the form to submit if the div is hidden you should disable any required input inside it and enable the inputs while you are showing the div

if someone need the codes to do so you should tell me exactly what you need