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

Its because there is a hidden input with required attribute in the form.

In my case, I had a select box and it is hidden by jquery tokenizer using inline style. If I dont select any token, browser throws the above error on form submission.

So, I fixed it using the below css technique :

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Answer 2

Adding a novalidate attribute to the form will help:

<form name="myform" novalidate>

Answer 3

In your form, You might have hidden input having required attribute.

<input type="hidden" required />

Hence form can't focus on that element, you have to remove required from all hidden inputs.

Answer 4

I found same problem when using Angular JS. It was caused from using required together with ng-hide. When I clicked on the submit button while this element was hidden then it occurred the error An invalid form control with name='' is not focusable. finally!

For example of using ng-hide together with required:

<input type="text" ng-hide="for some condition" required something >

I solved it by replacing the required with ng-pattern instead.

For example of solution:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Answer 5

Make sure that all of the controls in your form with the required attribute also have the name attribute set

Answer 6

There are things that still surprises me... I have a form with dynamic behaviour for two different entities. One entity requires some fields that the other don't. So, my JS code, depending on the entity, does something like: $('#periodo').removeAttr('required'); $("#periodo-container").hide();

and when the user selects the other entity: $("#periodo-container").show(); $('#periodo').prop('required', true);

But sometimes, when the form is submitted, the issue apppears: "An invalid form control with name=periodo'' is not focusable (i am using the same value for the id and name).

To fix this problem, you have to ensurance that the input where you are setting or removing 'required' is always visible.

So, what I did is:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Thats solved my problem... unbelievable.