Inline validation
Checking one field at a time and showing the problem right beside it, instead of dumping a list of errors after submit.
See it
What it is
Inline validation checks one field at a time and puts the result right next to that field, instead of collecting every problem and dumping a list at the top after submit. The person fixes the mistake while the field is still in their head, which is the entire reason it works.
Timing is the whole craft, and the rule that survives testing is 'reward early, punish late': validate on blur (when they leave the field), then once a field has an error, re-validate on every keystroke so the error clears the instant it is fixed. Success cues can appear early. Never validate an email on the third character; the user is typing, not failing.
Two traps. Inline validation is not server validation: uniqueness, authorization, and anything money-related still gets checked on the server, and the field-level UI just mirrors the answer. And the message has to be reachable, which means wiring 'aria-invalid' and 'aria-describedby' to the error text, keeping the error next to the input rather than under a floating tooltip, and never using color alone to signal the failure.
Ask AI for it
Wire this form with inline validation using react-hook-form and a zod schema, with mode: 'onTouched' and reValidateMode: 'onChange' so fields validate on blur and then correct live once they have errored. Render each error directly under its input in a small red text node, set aria-invalid on the input and link the message with aria-describedby, and give the error node role='alert'. Write messages that say how to fix it ('Use a format like name@example.com'), not what is wrong ('Invalid'). On submit, focus the first invalid field and scroll it into view. Keep layout stable by reserving the error line's height.