How do you create a custom hook to manage form validation

Question

How do you create a custom hook to manage form validation?

I'm working on form validation in my React application and want to create a reusable custom hook that would store my validation logic. I want to manage the state of my form and handle input field changes, thus showing error messages efficiently. Can I create a custom hook to manage form validation?

Navya · Answer 1 · Oct 21, 2024

Instead of coding up lots of code to check whether the input is valid, you can simply create a custom hook that does all this stuff for you by encapsulating all the validation logic.

Let’s create a custom hook for form validation :

Define the hook :

import {useState } from 'react'; function useFormValidation(initialValues , validationSchema){ // }

This hook takes 2 arguments : initialValues (the initial values for the form fields) and validationSchema ( a schema that defines the validation rules for each field).

Manage form state :

const [values , setValues] = useState(initialValues);

const [errors , setErrors] = useState({});

const [isSubmitting , setIsSubmitting ] = useState(false);

This code creates three state variables : values , errors , isSubmitting

Handle input changes :

const handleChange = (event) => {
const {name , value } = event.target;
setValues({...values , [name] : value});
};

This function updates the values state when the user types something into a form field.

Validate the form :

const handleSubmit = async (event) => {
event.preventDefault();
setIsSubmitting(true);

try {
await validateSchema.validate(values , { abortEarly: false });
}catch (errors) {
setErrors(errors.inner.reduce((acc , error ) => ({...acc , [error.path]:error.message }), {}));
} finally {
setIsSubmitting(false);
}
};

This function handles form submission.

Return the hook :

return {
values , 
errors,
isSubmitting,
handleChange , 
handleSubmit,
};

This returns an object that can be used in your component to access the form values , errors , and submission status.

Now you can use this custom hook in your form component :

import {useFromValidation } from './From';

function MyForm(){
const {values , errors , isSubmitting , handleChange , handleSubmit } = useFormValidation(

{ name: '' , email: '' },
);

return (
<form onSubmit = {handleSubmit}>
{ /* ...... form fields */ }
<button type = " submit " disabled= {isSubmitting}>Submit</button>
</form>
);
}<!-- notionvc: 7899c47b-e764-451e-9657-e39bac4a50ee -->