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?
Answer
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 removed from the DOM or it should 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:
.
Also see https://stackoverflow.com/a/7264966/1356062
No comments:
Post a Comment