An invalid form control with name='' is not focusable
This issue occurs on Chrome if a form field fails validation, but due to the respective invalid control not being focusable the browser's attempt to display the message "Please fill out this field" next to it fails as well.
A form control may not be focusable at the time validation is triggered for several reasons. The two scenarios described below are the most prominent causes:
The field is irrelevant according to the current context of the business logic. In such a scenario, the respective control should be disabled or removed from the DOM or not be marked with the
required
attribute at that point.Premature validation may occur due to a user pressing ENTER key on an input. Or a user clicking on a button/input control in the form which has not defined the
type
attribute of the control correctly. If the type attribute of a button is not set tobutton
, Chrome (or any other browser for that matter) performs a validation each time the button is clicked becausesubmit
is the default value of a button'stype
attribute.
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">
.
An invalid form control with name...is not focusable
Just because a form control is hidden doesn't mean it isn't required. And since it is required, but hidden the browser can't focus the form control.
Every place you have .hide()
change it to .hide().prop('required',false)
to fix your problem.
Invalid form control only in Google Chrome
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.
Related Topics
How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height
Put Icon Inside Input Element in a Form
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
How to Force a Line Break in a Long Word in a Div
Draw on Html5 Canvas Using a Mouse
How to Apply Hovering on HTML Area Tag
Svgs Not Scaling Properly in Ie - Has Extra Space
≪Embed≫ Vs. ≪Object≫
Is It Bad to Use !Important in a CSS Property
Submit Form Using a Button Outside the ≪Form≫ Tag
How to Create Download Link in Html
Use Images Instead of Radio Buttons
Display: Inline-Block Extra Margin
Minimum and Maximum Value of Z-Index
Do I Encode Ampersands in ≪A Href...≫
Percent Pie Chart With CSS Only
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser