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 can be that you have hidden (display: none) fields with the required attribute.

Please check all required fields are visible to the user :)

Answer 2

There are many ways to fix this like

1. Add novalidate to your form but its totally wrong as it will remove form validation which will lead to wrong information entered by the users.

<form action="...." class="payment-details" method="post" novalidate>

2. Use can remove the required attribute from required fields which is also wrong as it will remove form validation once again.

   Instead of this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. Use can disable the required fields when you are not going to submit the form instead of doing some other option. This is the recommended solution in my opinion.

   like:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

or disable it through javascript / jquery code dependes upon your scenario.

Answer 3

For other AngularJS 1.x users out there, this error appeared because I was hiding a form control from displaying instead of removing it from the DOM entirely when I didn't need the control to be completed.

I fixed this by using ng-if instead of ng-show/ng-hide on the div containing the form control requiring validation.

Hope this helps you fellow edge case users.

Answer 4

None of the previous answers worked for me, and I don't have any hidden fields with the required attribute.

In my case, the problem was caused by having a <form> and then a <fieldset> as its first child, which holds the <input> with the required attribute. Removing the <fieldset> solved the problem. Or you can wrap your form with it; it is allowed by HTML5.

I'm on Windows 7 x64, Chrome version 43.0.2357.130 m.

Answer 5

If you have any field with required attribute which is not visible during the form submission, this error will be thrown. You just remove the required attribute when your try to hide that field. You can add the required attribute in case if you want to show the field again. By this way, your validation will not be compromised and at the same time, the error will not be thrown.

Answer 6

I came here with the same problem. For me (injecting hidden elements as needed - i.e. education in a job app) had the required flags.

What I realized was that the validator was firing on the injected faster than the document was ready, thus it complained.

My original ng-required tag was using the visibility tag (vm.flags.hasHighSchool).

I resolved by creating a dedicated flag to set required ng-required="vm.flags.highSchoolRequired == true"

I added a 10ms callback on setting that flag and the problem was solved.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>