React Tutorial- Display Validation Error Messages With Hook Form
As a React developer, we should know how to implement validation in form, and a form may hold one or more than one input element.
If we have to get the user-provided data in a subtle manner, then we must show reverence to proper error handling.
In this tutorial, we will get to know in this guide how to add validation in React, show appropriate error messages in React application using Hook Form and Yup packages.
Now, let’s see what error messages are and why they should be displayed to the user.
Rarely, it happens that a user enters incorrect values into the form fields and we have seen some error messages manifest on the screen. These messages help in hinting our users about their blunders.
So now, it is quite clear that error messages play an important role in such a situation and help the users easily determine the issue. And after that, the user can immediately fix it and form with no error in it.
How To Use Error Hook Form To Show Validation Error Message
Step 1- Set Up React Project
Step 2- Add Bootstrap Library
Step 3- Add Yup And Hook Form Plugins
Step 4- Create Form Component File
Step 5- List Form Module In App Js
Step 6- Run Development Server
Now, let’s learn in detail:
Step 1- Set Up React Project
The very first and basic step is to install a new React project. For this, we have to type the given command on the terminal screen and execute it:
npx create-react-app react-shine
Afterward, we enter into the project folder:
cd react-shine
Step 2- Add Bootstrap Library
Now, in this step, we will execute the following instruction for adding the bootstrap in React app. We have to run the given command:
npm install bootstrap
Gere, we will include and use the bootstrap UI component in React. Do remember to import the bootstrap CSS in App.js file:
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
return (
<>
<>
)
}
Step 3- Add Yup And Hook Form Plugins
In the third step, we have to install the yup and hook form plugins. So, we have to use the given command to add the libraries:
npm install @hookform/resolvers yup
Step 4- Create Form Component File
Now, we will build a new component. This file will have the code to show error messages.
That is why, we open the component/ folder and make a new file inside the folder. We can name it ErrorMsg.js file:
import React from 'react'
import * as Yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { useForm } from 'react-hook-form'
export default function ErrorMsg() {
const yupValidation = Yup.object().shape({
name: Yup.string()
.required('Please enter some value.')
.min(4, 'Add minimum 4 characters'),
email: Yup.string().required('Email id is mendatory').email(),
})
const formOptions = { resolver: yupResolver(yupValidation) }
const { register, handleSubmit, reset, formState } = useForm(formOptions)
const { errors } = formState
function onSubmit(data) {
console.log(JSON.stringify(data, null, 4))
return false
}
return (
<div className="container mt-4">
<h2>React Integrate Validation Error Messages with Hook Form</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<label>Name</label>
<input
name="name"
type="text"
className={`form-control ${errors.name ? 'is-invalid' : ''}`}
{...register('name')}
/>
<div className="invalid-feedback">{errors.name?.message}</div>
</div>
<div className="form-group">
<label>Email</label>
<input
name="email"
type="text"
className={`form-control ${errors.email ? 'is-invalid' : ''}`}
{...register('email')}
/>
<div className="invalid-feedback">{errors.email?.message}</div>
</div>
<div className="mt-3">
<button type="submit" className="btn btn-primary">
Send
</button>
</div>
</form>
</div>
)
}
Step 5- List Form Module In App Js
This is about listing the error message component in React’s main app component file.
Hence, we have to open src/App.js and import the component as given below:
import React from 'react'
import ErrorMsg from './components/ErrorMsg'
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="App">
<ErrorMsg />
</div>
)
}
Step 6- Run The Server
The last step is to open the terminal again for which we type the following command and hit enter:
npm start
Conclusion
So, in this tutorial, we have seen to build a simple form with only two input controls name and email. And learned how to set validation error messages in React app using hook form and yup libraries.
Thanks