Skip to content

[selectors-4] Replace :user-valid/:user-invalid definition with HTML spec #9308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

[selectors-4] Replace :user-valid/:user-invalid definition with HTML spec #9308

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7bf3484
Replace :user-valid/:user-invalid definition with HTML spec
josepharhar Sep 5, 2023
2b39ecc
re-add basic description
josepharhar Sep 7, 2023
76a382c
add tabs suggestion
josepharhar Sep 19, 2023
a54edff
put example back in
josepharhar Sep 19, 2023
7cf0000
Merge branch 'main' into uservalid
josepharhar Aug 15, 2024
b3bf669
add more back in
josepharhar Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2788,6 +2788,9 @@ The Validity Pseudo-classes: '':valid'' and '':invalid''</h4>
but a <a element>p</a> element has no validity semantics at all,
and so it never matches either of these pseudo-classes.

Elements which don't match '':valid'' must not match '':user-valid'', and
elements which don't match '':user-invalid'' must not match '':invalid''.

<h4 id="range-pseudos">
The Range Pseudo-classes: '':in-range'' and '':out-of-range''</h4>

Expand Down Expand Up @@ -2821,22 +2824,12 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''</h4>
represent an element with incorrect or correct input, respectively,
but only <em>after</em> 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.
The '':user-invalid'' pseudo-class must match '':invalid'' elements after the
user has interacted with them or after attempting to submit the form.

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.
The exact matching behavior of '':user-valid'' and '':user-invalid''
are defined by the host language.
See, for example, <a spec=html lt=":user-invalid" selector>HTML's definition</a>.

<div class='example'>
For example, the input in the following document fragment
Expand All @@ -2860,8 +2853,6 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''</h4>

Issue: Evaluate proposed <a href="https://lists.w3.org/Archives/Public/www-style/2014Feb/0511.html">:dirty pseudo-class</a>

Issue: Clarify that this (and '':invalid''/'':valid'') can apply to form and fieldset elements.

<h2 id="structural-pseudos">
Tree-Structural pseudo-classes</h2>

Expand Down