This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Caută ajutor

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.

Află mai multe

Acest fir de discuție a fost arhivat. Adresează o întrebare nouă dacă ai nevoie de ajutor.

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

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.

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.

Toate răspunsurile (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;
  }