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 to button, Chrome (or any other browser for that matter) performs a validation each time the button is clicked because submit is the default value of a button's type 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">.

Adding a novalidate attribute to the form will help:

<form name="myform" novalidate>

In your form, You might have hidden input having required attribute:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

The form can't focus on those elements, you have to remove required from all hidden inputs, or implement a validation function in javascript to handle them if you really require a hidden input.