Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

HTML 5 Form Verification Issue | Missing information alert bubble doesn't stick to failing field

  • 4 replies
  • 1 has this problem
  • 48 views
  • Last reply by jscher2000

more options

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.

All Replies (4)

more options

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:

https://bugzilla.mozilla.org/

more options

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.

more options

This does appear to be the bug. Looks like we will be exploring other form validation methods in the meantime. Thanks for the reply.

more options

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;
  }