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
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.
1 | npm i react-hook-form @hookform/resolvers yup |
You will find the version of following packages in React application.
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.
1 2 3 4 5 6 7 8 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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..!! 🙂
Everything is very open with a very clear description of the
challenges. It was truly informative. Your site is very helpful.
Thank you for sharing!
Thank you so much for your kind words! We are delighted to hear that you found our site informative and helpful.