Closed Bug 1693969 Opened 2 years ago Closed 2 years ago

Remove :-moz-ui-invalid default style sheet rules and its novalidate handling


(Core :: CSS Parsing and Computation, defect)

Firefox 85



88 Branch
Tracking Status
firefox88 --- fixed


(Reporter: peter.yates, Assigned: emilio)



(Keywords: dev-doc-complete)


(3 files)

User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0

Steps to reproduce:

Create a page containing a form with a text input that has a pattern attribute and a submit input that has a formnovalidate attribute. Now enter some text that does not match the pattern and deselect the text input.

  <input type="text" pattern="zomg">
  <input type="submit" formnovalidate="formnovalidate">

Actual results:

The text input is outlined in red because the pattern isn't matched.

Expected results:

The text input should have no red outline because the form is set to not apply any validation.

When the form element has a novalidate attribute, the red outline doesn't appear.

It is my understanding based on the spec ( that the two approaches should work in the same manner.

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core
Component: DOM: Core & HTML → DOM: Forms

That is incorrect. The novalidate attribute bypasses validation during form submission only. This control matches :invalid in all browsers (add :invalid { background:red } to your style sheet to see). It seems that only Firefox gives a visual cue by default for invalid form controls at the moment though.

I discussed this with Emilio on IRC and some historical context for :-moz-ui-invalid can be found in bug 609017 and bug 610415. There's also a :user-invalid pseudo-class in Selectors that nobody implements.

Our tentative conclusion is to do the following:

  • Remove the default style sheet rules as other browsers do not have these
  • Remove the novalidate special case as it's broken for formnovalidate.

In the future we might want to look into removing this feature altogether, but that is likely more work due to existing internal usage.

Component: DOM: Forms → CSS Parsing and Computation
Keywords: dev-doc-needed
Summary: Input is surrounded by red border when submit has a formnovalidate attribute → Remove :-moz-ui-invalid default style sheet rules and its novalidate handling

Thank you for the response, the solution you proposed sounds sensible.

Actually, it might be easier to just do the right thing and don't show the invalid UI if the form submission hasn't been validated...

(we should probably check with other browsers still to see if they're interested in implementing the :user-valid / :user-invalid pseudo-classes anyhow)

Err, no, I thought we only showed the invalid ui after submit, but we also show it before submit...

There's no way to know whether the submission will actually be
validated, because formnovalidate on submit buttons is a thing (and even
if all the submit controls had formnovalidate, you could still submit
the form and validate it via form.submit()), so it seems better to make
these pseudo-classes not depend on this.

Assignee: nobody → emilio

Other browsers don't have this UI, and there's no way to know whether
the form will actually be validated, so it can cause false-positives.

Depends on D105968

Pushed by
Remove <form novalidate> handling from :-moz-ui-{valid,invalid} pseudo-classes. r=smaug
Remove default styling for :-moz-ui-{valid,invalid} pseudo-classes. r=xidorn
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch

Not really much to do on this one, docs-wise, except to add a rel note; see the discussion at

Depends on: 1780381
You need to log in before you can comment on or make changes to this bug.