React Hook Form Confirm Password Validation Tutorial

React hook form password match tutorial; In this tutorial, we will teach you the simple and best way to create password and password confirmation validation in the React application.

A form is created with several types of input elements, for instance: text fields, checkboxes, radio buttons, submit buttons etc. In this example, we will learn to build the password input field validation.

Generally, a password field is made using an input field. The primary work of confirm password is to confirm the values entered by the user in the password fields are similar or identical.

In this quick React hook form validation tutorial, we will specifically learn to implement password match validation in React app using Yup and React Hook Form libraries.

To validate the matching password, we will not be required to use any Regex; however, the Yup package will take care of this task, and we will teach you to implement it in the form from scratch.

How to Create Password and Confirm Match Password Validation in React Js

  • Step 1: Create React Project
  • Step 2: Add React Hook Form Library
  • Step 2: Add Yup Package
  • Step 3: Password Match Validation
  • Step 4: Add Component in App
  • Step 5: Start App in Browser

Create React Project

In order to begin, make sure to set up a new React app. You can download the app with a single command.

Head over to the command line tool of your code editor and execute the command to start the app installation process.

npx create-react-app react-form

Now, secondly get into the app folder.

cd react-form

Add React Hook Form Library

At this level, you have to invoke the following command and let the hook form package in your react app.

npm install @hookform/resolvers

Add Yup Package

Furthermore, you need to add the yup package in the react app. It will let you implement the validation through its powerful schema paradigm.

npm install yup

Password Match Validation

Now, inside this you have to add the useForm from “react-hook-form”, and yupResolver modules.

Then, it will allow us to create a simple form with a password field, also let you add the form validation rules.

First, ensure that you create the HookForm.js file in component/ folder, and insert the following code example in the file.

import React from 'react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as Yup from 'yup'

export default function HookForm() {
  
  const formSchema = Yup.object().shape({
    password: Yup.string()
      .required('Password is required')
      .min(4, 'Password length should be at least 4 characters'),
    passwordConfirm: Yup.string()
      .required('Confirm Password is required')
      .oneOf([Yup.ref('password')], 'Passwords must and should match'),
  })

  const validationOpt = { resolver: yupResolver(formSchema) }

  const { register, handleSubmit, reset, formState } = useForm(validationOpt)

  const { errors } = formState

  function onFormSubmit(data) {
    console.log(JSON.stringify(data, null, 4))
    return false
  }

  return (
    <div className="m-4">
      <h2>React Password Match Validation Example</h2>

      <form onSubmit={handleSubmit(onFormSubmit)}>
        <div className="form-row">
          <div className="form-group">
            <label>
              <strong>Password</strong>
            </label>
            <input
              name="password"
              type="password"
              {...register('password')}
              className={`form-control ${errors.password ? 'is-invalid' : ''}`}
            />
            <div className="invalid-feedback">{errors.password?.message}</div>
          </div>
          <div className="form-group">
            <label>
              <strong>Confirm Password</strong>
            </label>
            <input
              name="passwordConfirm"
              type="password"
              {...register('passwordConfirm')}
              className={`form-control ${
                errors.passwordConfirm ? 'is-invalid' : ''
              }`}
            />
            <div className="invalid-feedback">
              {errors.passwordConfirm?.message}
            </div>
          </div>
        </div>
        <div className="d-grid">
          <button type="submit" className="btn btn-dark mt-3">
            Register
          </button>
        </div>
      </form>
    </div>
  )
}

Add Component in App

In the next step, you have to open the App.js file, in this file we will import the form component.

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css';
import HookForm from './components/HookForm'

export default function App() {
  return (
    <div className="container mt-2">
      <HookForm />
    </div>
  )
}

Start App in Browser

In the last or eventual step, we will run react development server.

You can evoke the application server using the following command.

npm start

React Hook Form Confirm Password Validation Tutorial

Summary

In this tutorial, we diligently learned and explored the process of confirm password validation in React.

We explained the entire process bit by bit to build the password match validation component using the react hook form and yup packages.