React Tutorial- Display Validation Error Messages With Hook Form

Display Validation Error Messages With Hook Form

Before developing a React app, it is mandatory to understand how important it is to implement validation in form. A form may hold one or more than one input elements.

We should definitely show reverence to proper handling if we want to get the user-provided data in a subtle manner.

Throughout this guide, we will get to learn how to add validation in React and to show appropriate error messages in React app using Hook and Yup packages.

 

It should also be understood what are error messages and why they should be displayed to the user.

Sometimes, it happens that a user enters incorrect values into the form fields and we must have seen some error messages manifest on the screen. These messages help in hinting the users about their blunders.

So, error messages play a significant role in such a scenario and help users easily determine the issue. After that, users can quickly fix it and submit the form with absolutely no error.

 

How To Use React Hook Form To Show Validation Error Messages

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 New React Project

The very first step is to install a blank React project for which we will type the following command on the terminal and then, execute it:

npx create-react-app react-shine

Afterward, we will enter into the project folder:

cd react-shine

 

Step 2- Add Bootstrap Library

In this second step, we will add the bootstrap in the React app. So, we will add the library by running the following command:

npm install bootstrap

Now, we need to include and use the bootstrap UI component in React. Do remember to import the bootstrap CSS path 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

Here, we have to install the yup and hook form plugins by using the provided command to add the libraries:

npm install @hookform/resolvers yup

 

Step 4- Create Form Component File

In this step, we will have the code to show error messages by building a new component.

So, we need to 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

By following this instruction, we will list the error message component in React’s main app component file.

For this, we will open the src/App.js and import the component as shown 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 Development Server

In this last step, we have to open the terminal again to type the given command and hit enter:

npm start

 

Conclusion

In this tutorial, we built a simple form with only two input controls name and email. And also, learned how to set validation error messages in react app using yup and hook form libraries.

 

Thanks