Understanding Form States
There are a number of distinct “states” a form associated component can be in. The following are the CSS selectors available and what they mean.
| States | Description |
|---|---|
:valid,
[data-valid],
:state(valid)
|
When a form associated element meets all of it's validator requirements, regardless of if
the control has been interacted with.
Equivalent to :valid
https://developer.mozilla.org/en-US/docs/Web/CSS/:valid |
:invalid,
[data-invalid],
:state(invalid)
|
When a form associated element does not meet all of it's validator requirements,
regardless of if the form control has been interacted with.
Equivalent to :invalid
https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid |
[data-user-valid],
:state(user-valid)
|
When a form associated element does not meet all of it's validator requirements
and it has been meaningfully attempted to be interacted with.
Equivalent to :user-invalid
https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid |
[data-user-invalid],
:state(user-invalid)
|
When a form associated does not meet all of it's validator requirements,
and it has been meaningfully attempted to be interacted with.
Equivalent to :user-invalid
https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid |
In more simplistic terms, here’s the difference between states with the user-* prefix, and those without.
user-* is active when you "focusout" out of the form control, and the value of the element is NOT equal to the "defaultValue".
:user-valid: Need to have changed the value. If you’re in a user-valid state, and then start changing the value to an invalid value, then it becomes :invalid, but not :user-invalid until the user blurs from the form control.
:user-invalid: If we go from :user-invalid to a valid state, we become :user-valid, unlike :user-valid -> :invalid
:user-invalid -> :user-valid
:user-valid -> :invalid until blur then :user-invalid
On a form reset, a form control is only ever :valid or :invalid. Never :user-*.
When disabled, it is neither :valid or :invalid. Instead it is :disabled