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
2. Package dependencies
3. Create a form
4. Validate a form
5. Output

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

Demo & Source Code

GitHub Repository StackBlitz Project