React Tutorial- How To Add Confirm Password Validation In React With Hook Form

How To Add Confirm Password Validation In React With Hook Form

All of us know already that confirming or matching a password is a significant validation in React. It protects the user from creating an easily forgettable password.

 

It is so possible that a user can make a mistake in typing a password while entering the password in the input field.

This makes him end up making the wrong password. So, it becomes quite important to learn how to create confirm password validation in a React app to protect the user from such a difficult situation.

 

So, friends, we will get to know step by step how to do so by using hook form and yup packages.

 

React Example- Hook form Password Match And Confirm Password Validation

Step 1- Setting Up New React App

Step 2- Install Yup And Hook Form Packages

Step 3- Install Bootstrap Library

Step 4- Implement Hook Form Confirm Password Validation

Step5- Register App Js

Step 6- Run Development Server

 

Let’s learn in detail now:

Step 1- Setting Up New React App

Most of us already know how to set up a new React app. We can simply do it by using the create-react-app tool to generate one:

npx create-react-app react-world

After the new React app is installed, now we need to enter into the root of the application:

cd react-world

 

Step 2- Install Yup And Hook Form Packages

By installing Yup and Hook Form libraries, it becomes very simple to create and integrate validation. We will be installing both packages in the same step.

Then, we will execute the following command from the console:

npm install @hookform/resolvers yup

 

Step 3- Install Bootstrap Library

We must have basic knowledge of HTML and CSS. Even without it, we can create the form component in a minute by using the Bootstrap framework:

npm install bootstrap

After installing the library created in the node_modules folder, we will open App.js file where we have to add the bootstrap’s CSS path:

import 'bootstrap/dist/css/bootstrap.min.css'

 

Step 4- Implement Hook Form Confirm Password Validation

In this step, we will be building a ConfirmPassword.js file which we have to form inside the components/ directory.

In the file, we will write the given code which will help us in implementing the password match validation in the React app:

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

export default function ConfirmPassword() {
  const formSchema = Yup.object().shape({
    password: Yup.string()
      .required('Password is mendatory')
      .min(3, 'Password must be at 3 char long'),
    confirmPwd: Yup.string()
      .required('Password is mendatory')
      .oneOf([Yup.ref('password')], 'Passwords does not match'),
  })

  const formOptions = { resolver: yupResolver(formSchema) }

  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-5">
      <h2>React Confirm Password Validation Example</h2>

      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-group">
          <label>Password</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>Confirm Password</label>
          <input
            name="confirmPwd"
            type="password"
            {...register('confirmPwd')}
            className={`form-control ${errors.confirmPwd ? 'is-invalid' : ''}`}
          />
          <div className="invalid-feedback">{errors.confirmPwd?.message}</div>
        </div>

        <div className="mt-3">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
  )
}

 

Step 5- Register App Js

This step is about adding the hook form component for which we have to open App.js file.

Then, we will register the ConfirmPassword component by importing into it:

import React from 'react'
import ConfirmPassword from './components/ConfirmPassword'
import 'bootstrap/dist/css/bootstrap.min.css';


export default function App() {
  return (
    <div className="App">
      <ConfirmPassword />
    </div>
  )
}

 

Step 6- Run development Server

Now, we are left with only the testing for which we have to type the given command on the terminal. Afterward, we will run it to invoke the development server:

npm start

 

Conclusion

Sometimes, while creating a new password, it happens that the user might type some wrong password.

In that case, this confirm password validation comes as an important thing. Hope that you have learned to implement the password component.

 

Thanks