How To Create Password And Confirm Password Matching Validation In ReactJS

Introduction

In this article, we will learn how to create a password and confirm password matching validation in ReactJS application. Password and confirm password matching validation is generally required in the registration form and password reset or create form.

Prerequisites

• Basic knowledge of ReactJS
• Visual Studio Code
• Node and NPM installed
• Bootstrap

Create a React.js Project

Let's create a new React project by using the following command.

npx create-react-app numvalidation

Add Bootstrap (Optional)

Install bootstrap using the following command.

npm install bootstrap

Now, open the index.js file and add import Bootstrap. 

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

Now go to the src folder and create a new component, 'passwordmatch.js'. Add the following code to this component.

import React from 'react';
  
class PasswordMatch extends React.Component {
    constructor() {
    super();
    this.state = {
      input: {},
      errors: {}
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }  
  handleSubmit(event) {
    event.preventDefault();
    if(this.validate()){
        let input = {};
        input["password"] = "";
        input["confirmpassword"] = "";
        this.setState({input:input});
  
        alert('User Form is submited');
    }
  }
  
  validate(){
      let input = this.state.input;
      let errors = {};
      let isValid = true;
      if (!input["password"]) {
        isValid = false;
        errors["password"] = "Please Enter your Password.";
      }
  
      if (!input["confirmpassword"]) {
        isValid = false;
        errors["confirmpassword"] = "Please Enter your Confirm Password.";
      }
  
      if (typeof input["password"] !== "undefined" && typeof input["confirmpassword"] !== "undefined") {
          
        if (input["password"] != input["confirm_password"]) {
          isValid = false;
          errors["password"] = "Confirm password is Not Matched";
        }
      } 
  
      this.setState({
        errors: errors
      });
  
      return isValid;
  }
     
  render() {
    return (
      <div>
       <div class="row " className="header">
                    <div class="col-sm-12 btn btn-info">
                    How to create Password & Confirm Password Matching Validation in ReactJS
                    </div>
                </div>
        <form onSubmit={this.handleSubmit}>
          <div class="row form-group  container txtspace">
          <div class="col-sm-4">
            <label for="password">Password:</label>
            </div>
            <div class="col-sm-8">
            <input 
              type="password" 
              name="password"  onKeyUp={this.handleSubmit} 
              value={this.state.input.password}
              onChange={this.handleChange}
              class="form-control" 
              placeholder="Enter Password" 
              id="password" />
  
              <div className="text-danger">{this.state.errors.password}</div>
          </div>
          </div>
  
          <div class=" row form-group container">
            <div class="col-sm-4">
            <label for="password">Confirm Password:</label>
            </div>
            <div class="col-sm-8">
            <input 
              type="password" 
              name="confirmpassword" 
              value={this.state.input.confirmpassword}
              onChange={this.handleChange}
              class="form-control" 
              placeholder="Enter Confirm Password" 
              id="confirmpassword" />
 
              <div className="text-danger">{this.state.errors.confirmpassword}</div>
          </div>
          </div>
              
          <input type="submit" value="Submit" class="btn btn-info mrgnbtn" />
        </form>
      </div>
    );
  }
} 
export default PasswordMatch;

Open app.css file and add the following CSS.

.mrgnbtn{
  margin-top: 10px;
  margin-left: 622px;
}
.header{
  margin: 20px;
}
.txtspace{
  margin: 10px;;
}

Add a reference of this component in an app.js file.

import logo from './logo.svg';
import './App.css';
import PasswordMatch from './passwordmatch'
function App() {
  return (
    <div className="App">
      <PasswordMatch/>
    </div>
  );
}
export default App;

Now, run the project by using the 'npm start' command, and check the result.

Summary

In this article, we learned how to create a password and confirm password matching validation in ReactJS application.