Password and Confirm Password Validation in React Js

Hello Developer, In this tutorial, you will learn How to create a password and confirm password validation in react js. This tutorial is explained with some simple steps that are very easy to understand. So, you should not leave any single step otherwise you may miss some useful points.

React Password and Confirm Password Validation with the following Validation rule –

When you enter your password into the password input field then the password must have –

• at least one uppercase character
• at least one lowercase character
• at least one digit/number
• at least one special character
• minimum 8 characters

When you re-enter your password into the confirm password field then It must be matched with a password. Otherwise, a warning error will be raised.

React – Password and Confirm Password Validation

In this tutorial, I have created functionality for the password and confirm password validation using functional components. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Add & Remove Multiple Input Field Dynamically in React Js

How to Display Form Data in Table using React Js

Add and Delete Table Rows Dynamically using React Js

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  password-and-confirm-passsord-validation/
  |       |__PasswordAndConfirmPasswordValidation.js
  |       |__PasswordInputField.js
  |       |__ConfirmPasswordInputField.js
  |__App.js
  |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it in your react app.

For more information, you can learn How to use Bootstrap in React Js

1. Create PasswordAndConfirmPasswordValidation Component

File Name – PasswordAndConfirmPasswordValidation.js

import { useState } from "react/cjs/react.development";
import PasswordInputField from "./PasswordInputField";
import ConfirmPasswordInputField from "./ConfirmPasswordInputField";
function PasswordAndConfirmPasswordValidation(){

const [passwordError, setPasswordErr] = useState("");
const [confirmPasswordError, setConfirmPasswordError] = useState("");
const [passwordInput, setPasswordInput]= useState({
    password:'',
    confirmPassword:''
})

const handlePasswordChange =(evnt)=>{

    const passwordInputValue = evnt.target.value.trim();
    const passwordInputFieldName = evnt.target.name;
    const NewPasswordInput = {...passwordInput,[passwordInputFieldName]:passwordInputValue}
    setPasswordInput(NewPasswordInput);
    
}
const handleValidation= (evnt)=>{

    const passwordInputValue = evnt.target.value.trim();
    const passwordInputFieldName = evnt.target.name;

        //for password 
if(passwordInputFieldName==='password'){
    const uppercaseRegExp   = /(?=.*?[A-Z])/;
    const lowercaseRegExp   = /(?=.*?[a-z])/;
    const digitsRegExp      = /(?=.*?[0-9])/;
    const specialCharRegExp = /(?=.*?[#?!@$%^&*-])/;
    const minLengthRegExp   = /.{8,}/;

    const passwordLength =      passwordInputValue.length;
    const uppercasePassword =   uppercaseRegExp.test(passwordInputValue);
    const lowercasePassword =   lowercaseRegExp.test(passwordInputValue);
    const digitsPassword =      digitsRegExp.test(passwordInputValue);
    const specialCharPassword = specialCharRegExp.test(passwordInputValue);
    const minLengthPassword =   minLengthRegExp.test(passwordInputValue);

    let errMsg ="";
    if(passwordLength===0){
            errMsg="Password is empty";
    }else if(!uppercasePassword){
            errMsg="At least one Uppercase";
    }else if(!lowercasePassword){
            errMsg="At least one Lowercase";
    }else if(!digitsPassword){
            errMsg="At least one digit";
    }else if(!specialCharPassword){
            errMsg="At least one Special Characters";
    }else if(!minLengthPassword){
            errMsg="At least minumum 8 characters";
    }else{
        errMsg="";
    }
    setPasswordErr(errMsg);
    }

    // for confirm password
    if(passwordInputFieldName=== "confirmPassword" || (passwordInputFieldName==="password" && passwordInput.confirmPassword.length>0) ){
            
        if(passwordInput.confirmPassword!==passwordInput.password)
        {
        setConfirmPasswordError("Confirm password is not matched");
        }else{
        setConfirmPasswordError("");
        }
        
    }

}

    return(
    <div className="row">
     <div className="col-sm-4">
        <PasswordInputField 
        handlePasswordChange={handlePasswordChange} 
        handleValidation={handleValidation} 
        passwordValue={passwordInput.password} 
        passwordError={passwordError}/>
        <ConfirmPasswordInputField 
        handlePasswordChange={handlePasswordChange} 
        handleValidation={handleValidation} 
        confirmPasswordValue={passwordInput.confirmPassword} 
        confirmPasswordError={confirmPasswordError}/>
     </div>
    </div>
    )
}

export default PasswordAndConfirmPasswordValidation;

2. Create Password Component

File Name – PasswordInputField.js

function PasswordInputField({handleValidation, handlePasswordChange, passwordValue, passwordError}){
    return (
        <>
    <div className="form-group my-3">
        <input type="password" value={passwordValue}  onChange={handlePasswordChange} onKeyUp={handleValidation} name="password" placeholder="Password" className="form-control" />
        <p className="text-danger">{passwordError}</p>
   </div>
          
        </>
    )
}

export default PasswordInputField;

3. Create Confirm Password Component

File Name – ConfirmPasswordInputField.js

function ConfirmPasswordInputField({handleValidation, handlePasswordChange, confirmPasswordValue, confirmPasswordError}){
    return (
        <>
     <div className="form-group my-3">
        <input type="password" value={confirmPasswordValue}  onChange={handlePasswordChange} onKeyUp={handleValidation} name="confirmPassword" placeholder="Password" className="form-control" />
        <p className="text-danger">{confirmPasswordError}</p>
    </div>
        </>
    )
}

export default ConfirmPasswordInputField;

4. Render PasswordAndConfirmPasswordValidation

To render the PasswordAndConfirmPasswordValidation component, you will have to import it in the App component and render it as <PasswordAndConfirmPasswordValidation /> within the return() method.

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import PasswordAndConfirmPasswordValidation from "./password-and-confirm-password-validation/PasswordAndConfirmPasswordValidation";
function App() {
  render(){
  return (
    <PasswordAndConfirmPasswordValidation />
  )
  }
}
export default App;

5. Test Password and Confirm Password Validation Yourself

First of all, you have to run the following command to run the app.

npm start

Now, you can test the password and confirm password validation yourself  by opening the following URL in your web browser

http://localhost:3000