Add userValid to ValidityState

[jacobrask]

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]

This would require #8452 to be fixed first.

[annevk]

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]

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

[jimmyfrasche]

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

[jacobrask]

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]

@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]

@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]

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