Situation
Receive a JavaScript console error of
An invalid form control with name='xxxxx' is not focusablewhen trying to submit the form.
I asked one of my developers to comment out a field in a web page as part of a requirements change (I prefer to comment out initially before deleting so we are sure everything works fine with the change).
The developer added a style="display: none" to a surrounding div to hide a <select> field.
However, this in turn caused a JavaScript console error of An invalid form control with name='xxxxx' is not focusable when trying to submit the form.
Solution
Remove the “required” attribute from the form element.
In helping my developer I did a Google search for “an invalid form control with name=” is not focusable” and one of the first results lead to https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable.
On that page I immediately saw “Adding a novalidate attribute to the form will help” and that made me to immediately remember there is a “required” attribute still on the field that was hidden.
Experience and instinct kicked in.
We removed the “required” attribute and the form submission worked.
My guess is when the form was submitted the native browser-based validation did not work correctly because the specified field is “visually” hidden so the native validation message could not be shown, and that triggered the error in the console.