Home » Password And Confirm Password Validation in React JS

Password And Confirm Password Validation in React JS

password and confirm password validation in react

Today in this tutorial, we will learn how to add password and confirm password validation in react js app with an example. In this example, we are using react functional components.

Validate Password And Confirm Password in React

1. Setup React JS Project

Let us create a react js app using create-react-app.

npx create-react-app password-confirm-password-check-reactjs

2. Creating a Simple Form

Now let’s create a simple form with email, password, confirm password input elements, and a submit button. We are storing all the form data in a state variable.

App.js

import { useState } from "react";
import "./App.css";

function App() {
  const [formInput, setFormInput] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });

  const [formError, setFormError] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });

  const handleUserInput = (name, value) => {

  };

  const validateFormInput = (event) => {
    
  };

  return (
    <div className="App-container">
      <div className="card">
        <div className="card-header">
          <h4 className="title">Simple Form</h4>
        </div>

        <div className="card-body">
          <form onSubmit={validateFormInput}>
            <p className="label">Email</p>
            <input
              value={formInput.email}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="email"
              type="text"
              className="input"
              placeholder="Enter Email"
            />
            <p className="error-message">{formError.email}</p>

            <p className="label">Password</p>
            <input
              value={formInput.password}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="password"
              type="password"
              className="input"
              placeholder="Password"
            />
            <p className="error-message">{formError.password}</p>

            <p className="label">Confirm Password</p>
            <input
              value={formInput.confirmPassword}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="confirmPassword"
              type="password"
              className="input"
              placeholder="Confirm Password"
            />
            <p className="error-message">{formError.confirmPassword}</p>

            <input type="submit" className="btn" value="Submit" />
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

Adding some styles to our input elements and submit button.

index.css

*{
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin: 0;
}

.App-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #f9f9f9; */
  background-color: #0556F3;
}

.card {
  width: 20rem;
  background-color: #fff;
  border-radius: 1rem;
  border: 2px solid #F6F6F6;
  overflow: hidden;
  margin: 0 0.5rem;
}

.card-header{
  border-bottom: 1px solid #F6F6F6;
  padding: 1rem 1.2rem;
  background-color: #FBFBFB;
}

.title {
  font-size: 1rem;
  font-weight: 500;
  color: #343434;
  margin: 0;
}

.label{
  font-size: 0.8rem;
  color: #343434;
  margin: 0 0 0.3rem 0;
  margin-top: 1rem;
}

.card-body{
  padding: 0rem 1.2rem 1rem 1.2rem
}

.input {
  width: 16rem;
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
  padding: 0.6rem 0.8rem;
  background-color: transparent;
  border-radius: 0.5rem;
  border: 1px solid #f3f3f3;
}

::placeholder {
  font-size: 0.8rem;
  font-weight: 400;
  color: #e8e8e8;
}

.input:focus{
  outline: none;
}

.btn{
  width: 100%;
  display: inline;
  background-color: #0556F3;
  border-radius: 0.7rem;
  padding: 10px 20px;
  border: none;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  margin-top: 1rem;
}

.error-message{
  font-size: 0.7rem;
  font-weight: 500;
  color: red;
  margin-top: 0.2rem;
}

Also check out:

3. Adding Password Validation

// App.js

import { useState } from "react";
import "./App.css";

function App() {
  const [formInput, setFormInput] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });

  const [formError, setFormError] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });

  const handleUserInput = (name, value) => {
    setFormInput({
      ...formInput,
      [name]: value,
    });
  };

  const validateFormInput = (event) => {
    event.preventDefault();
    let inputError = {
      email: "",
      password: "",
      confirmPassword: "",
    };

    if (!formInput.email && !formInput.password) {
      setFormError({
        ...inputError,
        email: "Enter valid email address",
        password: "Password should not be empty",
      });
      return
    }

    if (!formInput.email) {
      setFormError({
        ...inputError,
        email: "Enter valid email address",
      });
      return
    }

    if (formInput.confirmPassword !== formInput.password) {
      setFormError({
        ...inputError,
        confirmPassword: "Password and confirm password should be same",
      });
      return;
    }

    if (!formInput.password) {
      setFormError({
        ...inputError,
        password: "Password should not be empty",
      });
      return
    }

    setFormError(inputError);
  };

  return (
    <div className="App-container">
      <div className="card">
        <div className="card-header">
          <h4 className="title">Simple Form</h4>
        </div>

        <div className="card-body">
          <form onSubmit={validateFormInput}>
            <p className="label">Email</p>
            <input
              value={formInput.email}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="email"
              type="text"
              className="input"
              placeholder="Enter Email"
            />
            <p className="error-message">{formError.email}</p>

            <p className="label">Password</p>
            <input
              value={formInput.password}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="password"
              type="password"
              className="input"
              placeholder="Password"
            />
            <p className="error-message">{formError.password}</p>

            <p className="label">Confirm Password</p>
            <input
              value={formInput.confirmPassword}
              onChange={({ target }) => {
                handleUserInput(target.name, target.value);
              }}
              name="confirmPassword"
              type="password"
              className="input"
              placeholder="Confirm Password"
            />
            <p className="error-message">{formError.confirmPassword}</p>

            <input type="submit" className="btn" value="Submit" />
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

For validating the password and confirm password we have written the validateFormInput function. We are invoking this function on submit button click.

Inside the validateFormInput function, we are using the preventDefault() method to prevent page reload when submit button is clicked. Then we are validating whether the password and confirm password values are equal or not. If they are not equal we will show an error message.

Output:

password and confirm password validation in react output

Leave a Reply

Your email address will not be published.