Skip to content
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

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

Closed
wants to merge 6 commits into from
Closed

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

Changes from 1 commit
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
42 changes: 1 addition & 41 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2813,52 +2813,12 @@ The Optionality Pseudo-classes: '':required'' and '':optional''</h4>
<h4 id="user-pseudos">
The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''</h4>

The <dfn id="user-invalid-pseudo">:user-invalid</dfn>
and the <dfn id="user-valid-pseudo">:user-valid</dfn> pseudo-classes
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.

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.

<div class='example'>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
For example, the input in the following document fragment
would match '':invalid'' as soon as the page is loaded
(because it the initial value violates the max-constraint),
but it won't match '':user-invalid'' until the user significantly interacts with the element,
or attempts to submit the form it's part of.

<pre>
&lt;form>
&lt;label>
Volume:
&lt;input name='vol' type=number min=0 max=10 value=11>
&lt;/label>
...
&lt;/form>
</pre>
</div>
The '':user-valid'' and '':user-invalid'' pseudo-classes are defined in HTML here: https://html.spec.whatwg.org/#selector-user-valid
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd probably do <a href="https://html.spec.whatwg.org/#selector-user-valid">in HTML</a>. or so (or using some bikeshed magic to get that), rather than dropping the raw URL there.

@tabatkins or @fantasai should look at this as editors, but lgtm for the general change, we shouldn't have two incompatible definitions of these.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suspect we'll want language like "are defined by the host language" along with a vague description of what the selectors are about.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I brought back the summary paragraph and said that its defined by the host language instead of html


Issue: Cross-check with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3A-moz-ui-invalid">'':-moz-ui-invalid''</a>.

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