An invalid form control with name='' is not focusable
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?
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">
将novalidate属性添加到表单将有助于：
<form name="myform" novalidate>
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.
上一篇: 如何验证html5中的组复选框？
下一篇: 名称=''的无效表单控件不可聚焦