search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.03k stars 2.62k forks source link

Add `userValid` to `ValidityState` #8938

Open jacobrask opened 1 year ago

jacobrask commented 1 year ago

CSS Selectors 4 defines the :user-invalid and :user-valid pseudo classes, that apply to an element after the user has significantly interacted with it [user-pseudos]. :user-invalid and :user-valid were selected for Interop 2023.

These values are currently not exposed by the constraint validation API.

ValidityState.valid matches the state of the :valid selector, but there is nothing for the corresponding :user-valid selector.

When implementing form validation you currently need to keep track of the "touched" status of a form element manually, to avoid showing validation errors before a user has interacted with the form. Adding ValidityState.userValid would let you defer the meaning of "significant user interaction" to the browser and have it be consistent with the behaviour of the :user-valid CSS selector.

annevk commented 1 year ago

This would require #8452 to be fixed first.

annevk commented 1 year ago

I don't think this makes sense to be part of ValidityState as all the (absence of) flags there contribute to the meaning of valid, whereas this is not quite that.

annevk commented 1 year ago

Also, thinking about this more, why wouldn't using matches(":user-valid") be sufficient here?

jimmyfrasche commented 12 months ago

Maybe it would make sense to separate out the "user has modified it" bit and expose that on the form element itself?

jacobrask commented 12 months ago

Also, thinking about this more, why wouldn't using matches(":user-valid") be sufficient here?

Couldn't you say the same about HTMLMediaElement.paused and a number of other properties exposed as CSS pseudo classes?

annevk commented 12 months ago

@jimmyfrasche yeah, #9639 tracks that idea.

@jacobrask you can and sometimes people do. I think we could consider adding userValid as a sibling to validity, but it doesn't fit on ValidityState I think.

jimmyfrasche commented 12 months ago

@annevk that's for adding a way to set the "user has interacted" but for FACE but I don't see any mention of exposing it on form elements in general.

I think it should just be exposed as userInteracted. You can check that and the validity state easily enough, or use matches, if you want to check :user-{in,}valid but if you wanted to know just whether the elements been interacted with the logic to express that query is more abstruse than necessary.

annevk commented 12 months ago

That's fair. I guess a boolean getter for that is a reasonable solution as well and simpler.