Validating React forms easily without third-party libraries
Even with the advances regarding form validation in React 19, the sad truth is that validating a form is still a boring and repetitive task. The goal of this post is to share an approach that's versatile enough to work with any form while significantly reducing the effort and monotony of coding it.
The way responsibilities are split in this strategy, represented by the blocks A and B in the diagram above, lets you extract B into its own module, making it reusable across your entire app.
Form Data: State variable representing the form's data as an object with key/value pairs, where key is the name of the form field:
Validations: Object with a similar structure to formData, but instead of key/value pairs, it holds a list of validators and their corresponding error messages. The idea is that the value entered in the form field is checked against each validation, and if one fails, the related error message is shown next to the field:
Form Errors: Object with key/value pairs representing form errors. The key is the name of the form field, and the value is the error message explaining what's wrong. Valid fields won't be included in formErrors, so when the form is 100% valid, formErrors will be an empty object ({}):
