HTML 5 Form Verification Issue | Missing information alert bubble doesn't stick to failing field
As the subject line reads, I am experiencing the alert bubble not sticking to the failing input field while building a site using HTML5 and testing it on FireFox v78.0.2 (64-bit). Specifically, when I submit the form while leaving an input field empty, the browser will catch the required field as being empty and will stick the alert bubble to the field; however, when you scroll away from the failing field, the bubble does not stick to the field, but sticks instead to the top of the browser window.
I am using simple "required" tags for input fields in the form. On every other browser I have tried (Chrome, Edge, Brave) this issue does not exist.
Thanks for any help that you can provide.
Wšykne wótegrona (4)
Hi David, I can see the problem occurs with the example on MDN as well:
https://developer.mozilla.org/docs/Web/HTML/Attributes/required#Example
I don't know whether there is already a bug on file for this but if you start filing a new one, the site will check that:
It seems to be a case of this bug:
[e10s] HTML5 validation popup doesn't close when the form element scrolls
I would say not to expect a fix in the next several months as it has only an average priority and severity ranking. Sorry about that.
This does appear to be the bug. Looks like we will be exploring other form validation methods in the meantime. Thanks for the reply.
You might explore using :invalid. https://developer.mozilla.org/docs/Web/CSS/:invalid
In addition to field coloring, if you have hints next to your fields, you could use a sibling selector to toggle them:
input:invalid ~ .hint {
display: inline;
}
input:valid ~ .hint {
display: none;
}