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