User Valid
About
The :user-valid pseudo-class is similar to :valid, but it only matches elements in a valid state after the user has interacted with them.
Validation on blur
A valid input is considered user-valid if the user changes the value and then commits the change by leaving the input field.
- Enter a value and keep the input focused, the selector will not match
- Leave the input field to let the selector match
Re-validation on change
After the :user-valid pseudo-class has been applied, it will revaliate the input on every change and not just on blur.
- Enter a value and leave the input field to let the selector match
- Clear the value to trigger revalidation immediately
- Enter a value again to trigger revalidation immediately
Form Submit
If the user submits a form, all valid inputs are considered user-valid even if the user hasn't interacted with them.
- Submit the form without entering a value