Track Controlled Input Validation
Unanswered
White-crowned Pigeon posted this in #help-forum
White-crowned PigeonOP
how do you track validation error of an input element which won’t be on every keystroke? say an input email, once the user stops typing you display the error message if it’s invalid ?
denounce?
denounce?
5 Replies
@White-crowned Pigeon how do you track validation error of an input element which won’t be on every keystroke? say an input email, once the user stops typing you display the error message if it’s invalid ?
denounce?
Yea, debounce is one option. Another is only check if after a specific length or do it via a long interval, the checks every X ms. Or you validate them only on form submit
White-crowned PigeonOP
@B33fb0n3 it’s for an email and password input
Yeah i feel the validation on input works more better but the use case and acceptance criteria here it to let users know when they enter wrong email
Yeah i feel the validation on input works more better but the use case and acceptance criteria here it to let users know when they enter wrong email
@White-crowned Pigeon <@301376057326567425> it’s for an email and password input
Yeah i feel the validation on input works more better but the use case and acceptance criteria here it to let users know when they enter wrong email
I would check specific criteria in every keydown event. If it’s an controlled input (and I think it is) then the useState will be changed on every keydown event. So checking the validation or an email or password is completely fine
@White-crowned Pigeon how do you track validation error of an input element which won’t be on every keystroke? say an input email, once the user stops typing you display the error message if it’s invalid ?
denounce?
If you are concerned that validating every keystroke may impact performance, consider using
https://www.joshwcomeau.com/react/use-deferred-value/
Note that you should be cautious of the potential gotchas mentioned in the article if you're not using React Compiler
useDeferredValuehttps://www.joshwcomeau.com/react/use-deferred-value/
Note that you should be cautious of the potential gotchas mentioned in the article if you're not using React Compiler
@White-crowned Pigeonsolved?