Given that form errors and validation are a function of state, imho this belongs in the state machine... either a Redux reducer.
form: {
fields: [
...,
{
name: FIELD_FOO, // const for i18n
value: '',
status: null,
/* null = never focused
false = focused, first time
true = blured before, or repeat focus
*/
errors: [
REQUIRED,
INVALID_FOO
] // should be a constant against i18n lookup
}
],
submitting: false,
}
with the above, there's enough information to display what is needed and to do validation... onfocus/blur/keypress etc should be evented for validation.
Given that form errors and validation are a function of state, imho this belongs in the state machine... either a Redux reducer. form: { fields: [ ..., { name: FIELD_FOO, // const for i18n value: '', status: null, /* null = never focused false = focused, first time true = blured before, or repeat focus */ errors: [ REQUIRED, INVALID_FOO ] // should be a constant against i18n lookup } ], submitting: false, } with the above, there's enough information to display what is needed and to do validation... onfocus/blur/keypress etc should be evented for validation.