On this page
The core idea
Form validation has two audiences: the person filling in the form, who needs timely and specific guidance, and the server, which must reject invalid data regardless of the client. Good client-side validation checks a field when the user has finished with it, usually on blur, then updates as they correct it, and checks everything again on submit. Messages appear next to the field, describe the fix and are announced to assistive technology. The same rules are enforced on the server.
A practical approach
Step 1
Use native input types and attributes, such as type="email", required and maxLength, as a baseline.
Step 2
Validate a field when it loses focus for the first time, then revalidate as the user types to clear the error as soon as it is fixed.
Step 3
On submit, validate all fields, show a summary or move focus to the first invalid field and keep everything the user typed.
Step 4
Write messages that explain the fix, such as 'Enter a 10-digit mobile number', not just 'Invalid'.
Step 5
Connect each message to its input with aria-describedby and mark the field with aria-invalid when it has an error.
Worked example
A webinar registration form shows 'Invalid input' in red under the phone field as soon as the learner types the first digit, and clears all fields when the server rejects the email. Changing validation to run on blur, rewording the message to show the expected format, keeping the values after a server error and showing the server's field-specific message next to the email field reduces abandoned registrations noticeably.
A mistake to avoid
Do not rely on client-side validation for security or data integrity. Anyone can send a request directly to your API. The server must validate every field again.
Try it yourself
Take a form you have built and test it by filling it incorrectly in several ways. Note when each error appears, whether the message explains the fix and whether your input survives a failed submission. Fix the worst issue.
Your implementation checklist
- Native input types and attributes provide a baseline
- Fields validate on blur, then revalidate while correcting
- Submission validates everything and preserves input
- Messages explain how to fix the problem
- Errors are associated with inputs for assistive technology
Share or cite this guide
Innovate with Ajay Editorial (2026-10-07). Build React Forms That Validate without Fighting the User. https://innovatewithajay.com/blogs/build-react-forms-that-validate-kindly