“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 fo

Answer 1

I have to do something like this to fix the bug, since I have some type="number" with min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

If I don't set all hidden input field to null chrome will still try to validate the input.

Answer 2

No validate will do the job.

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

Answer 3

try to use proper tags for HTML5 controls Like for Number(integers)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

for Decimals or float

 <input type='number' min='0' step='Any'/>

step='Any' Without this you cannot submit your form entering any decimal or float value like 3.5 or 4.6 in the above field.

Try fixing the pattern , type for HTML5 controls to fix this issue.

Answer 4

If you don't care about HTML5 validation (maybe you are validating in JS or on the server), you could try adding "novalidate" to the form or the input elements.

Answer 5

I had this issue when I had class="hidden" on the input fields because I was using buttons instead of radio bullets - and changing the "active" state via JS..

I simply added an extra radio input field part of the same group where i wanted the msg to appear:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

the other 2 active bullets are invisible, this one isnt and this triggers the validation message and no console errors - bit of a hack but what isnt these days..

Answer 6

I was getting this error, and determined it was actually on a field that was not hidden.

In this case, it was a type="number" field, that is required. When no value has ever been entered into this field, the error message is shown in the console, and the form is not submitted. Entering a value, and then removing it means that the validation error is shown as expected.

I believe this is a bug in Chrome: my workaround for now was to come up with an initial/default value.