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.
Google chrome An invalid form control is not focusable using jQuery Tabs
This appears to work a little like answer from Vilriana :
//when submitted if there was an issue
$("form input").on("invalid", function() {
//find tab id
var element = $(this).closest('.ui-tabs-panel').index();
//goto tab id
$('#yourTabs').tabs('option', 'active', element)
});
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
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 in a form
The reason for the specific error you're getting of "invalid form control with name='' is not focusable" is because the browser wants to focus on the form element that is required(the text input), but the element is not visible.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
You're saying that the text field is only required if cars.other evaluates to false. In other words, you're saying that the text field is required whenever it isn't filled out. What you actually want is for the text field to be required if cars.erp is set to other.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="cars.erp=='Other'">
Related Topics
Making a Paragraph in HTML Contain a Text from a File
A Library to Convert Ansi Escapes (Terminal Formatting/Color Codes) to HTML
CSS Two Columns of Lists - Responsive Merge into One Column
Make Flex Item Wrap to the Next Row with Following Items Continuing the Flow
Using Os 9 Resource Fork Fonts in CSS with @Font-Face
Setting Width:Auto Leads to Width:100%
Animating with Variables Angular 4
HTML and CSS: Using Background Image as a Clickable Link
How to Detect HTML 5 Compatibility in Browser
What's the Difference Between HTML's and CSS's Width Attribute
Restoring the Value of a Input Type=File After Failed Validation
Image Flex Item Does Not Shrink Height in a Flexbox
Last-Child:After Not Rendering in Chrome? Pseudo-Element Use Issue