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..!! 🙂
