An invalid form control with name='' is no

Question

I have an acute problem on my website. In Google Chrome some customers are not able to proceed to my payment page. When trying to submit a form I get this error:

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

This is from the JavaScript console.

I read that the problem could be due to hidden fields having the required attribute. Now the problem is that we are using .net webforms required field validators, and not the html5 required attribute.

It seems random who gets this error. Is there anyone who knows a solution for this?

Answer 1

It's not enough to state

Adding a novalidate attribute to the form will help

It does not explain the problem, and the OP may not have understood why it would help, or if it really is helpful.

Here's an answer that truly explains the case, understanding the problem should enable you to arrive at a solution that is suitable for your development:

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.

To put the warning into good use, consider this - don't hide a field when it fails validation. But that is not a strict rule, nor is it a rule at all. As I mentioned in my comment below, I paraphrase

In some cases, the issue is not a problem at all and does not cause loss of functionality in an application. Then the error maybe ignored.

UPDATE: August 21, 2015

The error in question may also arise due to a premature validation. Premature validation can occur when you have a <button> input without a set type attribute. Without the type attribute of a button being set to button, Chrome (or any other browser for that matter) performs a validation each time the button is clicked because submit is the default type of buttons. To solve the problem, if you have a button on your page that does something else other than submit or reset, always remember to do this: <button type="button">

Answer 2

For me this happens, when there's a <select> field with pre-selected option with value of '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Unfortunately it's the only cross-browser solution for a placeholder (How do I make a placeholder for a 'select' box?).

The issue comes up on Chrome 43.0.2357.124.

Answer 3

1> Adding a novalidate attribute to the form will help:
it will remove the  validation 


<form name="userForm" id="userForm" novalidate>

2> it can be issue of id or name value , it was already using somewhere 
change the value of id   and name 
2nd point help to fix the error

Answer 4

In my case..

ng-show was being used.
ng-if was put in its place and fixed my error.

Answer 5

I received the same error when cloning an HTML element for use in a form.

(I have a partially complete form, which has a template injected into it, and then the template is modified)

The error was referencing the original field, and not the cloned version.

I couldn't find any methods that would force the form to re-evaluate itself (in the hope it would get rid of any references to the old fields that now don't exist) before running the validation.

In order to get around this issue, I removed the required attribute from the original element and dynamically added it to the cloned field before injecting it into the form. The form now validates the cloned and modified fields correctly.

Answer 6

Another possible cause and not covered in all previous answers when you have a normal form with required fields and you submit the form then hide it directly after submission (with javascript) giving no time for validation functionality to work.

The validation functionality will try to focus on the required field and show the error validation message but the field has already been hidden, so "An invalid form control with name='' is not focusable." appears!

Edit:

To handle this case simply add the following condition inside your submit handler

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Edit: Explanation

Supposing you're hiding the form on submission, this code guarantees that the form/fields will not be hidden until form become valid. So, if a field is not valid, the browser can focus on it with no problems as this field is still displayed.