Description

Quoting the specification:

The :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it.

The :user-invalid pseudo-class must match an :invalid, :out-of-range, or blank-but-:required elements between the time the user has attempted to submit the form and before the user has interacted again with the form element.

The :user-valid pseudo-class must match a :valid element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

User-agents may allow them to match such elements at other times, as would be appropriate for highlighting an error to the user. For example, a UA may choose to have :user-invalid match an :invalid element once the user has typed some text into it and changed the focus to another element, and to stop matching only after the user has successfully corrected the input.

Rationale

There has been plenty of discussions and workarounds supporting this for over a decade now (or at least as far back as I can remember)— not so much the pseudo itself so much as clunky methods to accomplish what this pseudo would provide effortlessly.

• https://www.bram.us/2021/01/28/form-validation-you-want-notfocusinvalid-not-invalid/
• forms: validation. don't show errors until the user has had a chance to do something angular/material#1633
• Bug - Input - Validation - First time validation doesn't show error angular/components#7558
• Bug - Input - Validation - First time validation doesn't show error angular/components#7558
• https://stackoverflow.com/questions/40529817/reactive-forms-mark-fields-as-touched
• Angular's markAsTouched, markAsUntouched, markAsDirty, markAsPristine → https://angular.io/api/forms/AbstractControl
  • https://stackoverflow.com/questions/59885764/angular-is-there-a-way-to-markastouched-a-field-without-a-form
  • https://stackoverflow.com/questions/60759030/both-markallastouched-and-markastouched-dont-affect-subforms
• How to mark custom form control as dirty/touched? vmware-archive/clarity#3191

Oftentimes, we want to validate/invalidate form data, but we don't want to show the field as valid or invalid until after the first change event so the user has a chance to interact with the form field before the page applies successful/failure styling to the element.

Specification

https://w3c.github.io/csswg-drafts/selectors-4/#user-pseudos

Tests

• :user-invalid: https://wpt.fyi/results/css/selectors/user-invalid.html?label=master&label=experimental&aligned&view=subtest&q=user-invalid
• :user-valid: https://wpt.fyi/results/css/selectors/user-valid.html?label=master&label=experimental&aligned&view=subtest&q=user-valid