User Invalid
About
The :user-inalid pseudo-class is similar to :invalid, but it only matches elements in an invalid state after the user has interacted with them.
Validation on blur
An invalid input is considered user-invalid if the user changes the value and then commits the change by leaving the input field.
- Clear the 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-invalid pseudo-class has been applied, it will revaliate the input on every change and not just on blur.
- Clear the value and leave the input field to let the selector match
- Enter a value to trigger revalidation immediately
- Clear the value again to trigger revalidation immediately
Form Submit
If the user submits a form, all invalid inputs are considered user-invalid even if the user hasn't interacted with them.
- Submit the form with the invalid email address