Validation logic typically runs either on every change for immediate feedback, on blur when a field loses focus, or on submit as a final check before actually sending the data — a common pattern computes an errors object mapping each invalid field's name to its specific error message, checked before allowing the actual form submission logic to proceed. While validation can be written entirely by hand with plain functions and conditionals, dedicated libraries like Formik or React Hook Form, often paired with a schema-validation library like Yup or Zod, handle much of this boilerplate, including tracking touched fields and displaying errors at the right time, more consistently than typical hand-rolled solutions.
1Understanding Form Validation
Validation logic typically runs either on every change for immediate feedback, on blur when a field loses focus, or on submit as a final check before actually sending the data — a common pattern computes an errors object mapping each invalid field's name to its specific error message, checked before allowing the actual form submission logic to proceed. While validation can be written entirely by hand with plain functions and conditionals, dedicated libraries like Formik or React Hook Form, often paired with a schema-validation library like Yup or Zod, handle much of this boilerplate, including tracking touched fields and displaying errors at the right time, more consistently than typical hand-rolled solutions.
Validating only on submit, rather than on change or blur, can leave a user staring at a wall of error messages all at once after filling out an entire form — validating on blur, when a field loses focus, generally strikes a better balance between helpful, timely feedback and not being overly aggressive while the user is still actively typing.
function validate(values) {
const errors = {};
if (!values.email) errors.email = 'Email is required';
else if (!/\S+@\S+\.\S+/.test(values.email)) errors.email = 'Email is invalid';
return errors;
}
console.log(validate({ email: 'not-an-email' }));2Practical Example
Here is a real-world application of Form Validation showing how it is used in production React code.
console.log(validate({ email: '' }));
console.log(validate({ email: 'ana@example.com' }));3Best Practices
Follow these guidelines when working with Form Validation:
1. Compute an errors object mapping field names to specific, clear error messages, checking it's empty before allowing actual form submission to proceed
2. Validate on blur for the best balance of timely feedback without interrupting the user while they're still actively typing into a field
3. Reach for a library like Formik or React Hook Form, often paired with Yup or Zod for schema validation, once a form's validation needs grow non-trivial, rather than hand-rolling increasingly complex validation logic
Tip: Validating only on submit, rather than on change or blur, can leave a user staring at a wall of error messages all at once after filling out an entire form — validating on blur, when a field loses focus, generally strikes a better balance between helpful, timely feedback and not being overly aggressive while the user is still actively typing.
function validate(values) {
const errors = {};
if (!values.email) errors.email = 'Email is required';
else if (!/\S+@\S+\.\S+/.test(values.email)) errors.email = 'Email is invalid';
return errors;
}
console.log(validate({ email: 'not-an-email' }));