Validate a form in React using react-hook-form
In this article, we will show you how to validate a form in React using react-hook-form. In the previous article, we have explained how to create a form using react-hook-form.
Demo Application
Output - Validate a form in React using react-hook-form - Clue Mediator
Validate a form in React using react-hook-form
1. Project structure
Refer to the following project structure for the demo application.
-
validate-form-using-react-hook-form
-
node_modules
-
public
- index.html
-
src
- App.js
- index.css
- index.js
-
package-lock.json
-
package.json
-
README.md
-
2. Package dependencies
In this example, we have to install the `react-hook-form`, `@hookform/resolvers` and `yup` npm packages. Run the following command to install packages.
npm i react-hook-form @hookform/resolvers yup You will find the version of following packages in React application.
react
^18.2.0
react-hook-form
^7.41.3
@hookform/resolvers
^2.9.10
yup
^0.32.11
3. Create a form
Let’s create a simple form using react-hook-form. Refer to the following article for more information.
Create a simple form in React using react-hook-form
4. Validate a form
To validate the form, first prepare your schema for validation.
import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from "yup"; const schema = yup.object({ name: yup.string().required("Please enter name"), email: yup.string().email("Please enter valid email").required("Please enter email"), website: yup.string().url("Please enter valid url").required("Please enter url"), }); Let’s add schema to form and register input with React Hook Form.
function App() { const [data, setData] = useState(); const { register, handleSubmit, formState } = useForm({ resolver: yupResolver(schema) }); const { errors } = formState; const onSubmit = (formData) => { setData(formData); } return <form onsubmit={handleSubmit(onSubmit)}> <div> <label>Name</label> <input placeholder="Name" {...register('name')}=""> {errors.name && <p>{errors.name.message}</p>} </div> <div> <label>Email</label> <input placeholder="Email" {...register('email')}=""> {errors.email && <p>{errors.email.message}</p>} </div> <div> <label>Website</label> <input placeholder="Website" {...register('website')}=""> {errors.website && <p>{errors.website.message}</p>} </div> <div> <button>Submit</button> </div> {data && <pre>{JSON.stringify(data, null, 2)}</pre>} </form> } 5. Output
Let’s combine all code together and see how it looks.
App.js
import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from "yup"; const schema = yup.object({ name: yup.string().required("Please enter name"), email: yup.string().email("Please enter valid email").required("Please enter email"), website: yup.string().url("Please enter valid url").required("Please enter url"), }); function App() { const [data, setData] = useState(); const { register, handleSubmit, formState } = useForm({ resolver: yupResolver(schema) }); const { errors } = formState; const onSubmit = (formData) => { setData(formData); } return <form onsubmit={handleSubmit(onSubmit)}> <h4>Validate a form using react-hook-form - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4> <div> <label>Name</label> <input placeholder="Name" {...register('name')}=""> {errors.name && <p>{errors.name.message}</p>} </div> <div> <label>Email</label> <input placeholder="Email" {...register('email')}=""> {errors.email && <p>{errors.email.message}</p>} </div> <div> <label>Website</label> <input placeholder="Website" {...register('website')}=""> {errors.website && <p>{errors.website.message}</p>} </div> <div> <button>Submit</button> </div> {data && <pre>{JSON.stringify(data, null, 2)}</pre>} </form> } export default App; Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
