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

Answer 2

In my case the problem was with the input type="radio" required being hidden with:

visibility: hidden;

This error message will also show if the required input type radio or checkbox has a display: none; CSS property.

If you want to create custom radio/checkbox inputs where they must be hidden from the UI and still keep the required attribute, you should instead use the:

opacity: 0; CSS property

Answer 3

This error happened to me because I was submitting a form with required fields that were not filled.

The error was produced because the browser was trying to focus on the required fields to warn the user the fields were required but those required fields were hidden in a display none div so the browser could not focus on them. I was submitting from a visible tab and the required fields were in an hidden tab, hence the error.

To fix, make sure you control the required fields are filled.

Answer 4

You may try .removeAttribute("required") for those elements which are hidden at the time of window load. as it is quite probable that the element in question is marked hidden due to javascript (tabbed forms)

e.g.

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

This should do the task.

It worked for me... cheers

Answer 5

Yea.. If a hidden form control has required field then it shows this error. One solution would be to disable this form control. This is because usually if you are hiding a form control it is because you are not concerned with its value. So this form control name value pair wont be sent while submitting the form.

Answer 6

My scenario I hope not missed in this lengthy seed of answers was something really odd.

I have div elements that dynamically update through a dialogBox being called in them to load and get actioned in.

In short the div ids had

<div id="name${instance.username}"/>

I had a user: 测试帐户 and for some reason the encoding did some strange stuff in the java script world. I got this error message for a form working in other places.

Narrowed it down to this and a retest of using numeric numbers instead i.e id appears to fix the issue.