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

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[peter.yates]

Attachment: Example of the outline on a form where the submit input has formnovalidate set

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.

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

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 (https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-submitbuttonelements-formnovalidate) that the two approaches should work in the same manner.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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.

Comment 2

[Anne (:annevk)]

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.

Comment 3

[Anne (:annevk)]

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.

Comment 4

[peter.yates]

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

Comment 5

[Emilio Cobos Álvarez [:emilio]]

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...

Comment 6

[Emilio Cobos Álvarez [:emilio]]

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

Comment 7

[Emilio Cobos Álvarez [:emilio]]

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

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1693969 - Remove <form novalidate> handling from :-moz-ui-{valid,invalid} pseudo-classes. r=smaug

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.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1693969 - Remove default styling for :-moz-ui-{valid,invalid} pseudo-classes. r=#style,#layout-reviewers

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

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/16aa51f7d201
Remove <form novalidate> handling from :-moz-ui-{valid,invalid} pseudo-classes. r=smaug
https://hg.mozilla.org/integration/autoland/rev/70d457e2ca37
Remove default styling for :-moz-ui-{valid,invalid} pseudo-classes. r=xidorn

Comment 11

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/16aa51f7d201
https://hg.mozilla.org/mozilla-central/rev/70d457e2ca37

Comment 12

[Chris Mills [:cmills]]

Not really much to do on this one, docs-wise, except to add a rel note; see the discussion at https://github.com/mdn/content/issues/3454