Scenario is simple, a password field with few validation rules.
The states I came up with are
- default ( when the form loads or reset button is pressed)
- filled ( should this even be a state ?)
- valid ( date is present with all rules satisfied)
- invalid (data is there but not satisfying the rule set )
Error message is displayed based on the current state.
- default state, user didn't enter any data yet, so logical it is an invalid state (assuming the field is required) but we do not want to show errors to the user right away after opening the form (that will be horrible ux, right ?) so I added the default state specifically for that purpose.
Secondly, there seems to be arbitrary states Like
They look like states to me but are they?
Lastly, can we say
- submitted is also a state ?
- invalid after submitted due to error in API call ( maybe API team added a new rule we didn't know).
Million dollar questions are,
Am I even thinking in the right direction to implement validation this way? Is there any states I am missing or overdoing? Is this right? Can it be further simplified?
P.s. (this question is about how to infer states from a problem and not about how to actually implementing it in code. I know and have used xstate lib).