In this article, we will see how to validate password and confirm password in react js. Sometimes we need to add the password and confirm the password field in react js form. So, we will show you step-by-step how to validate password and confirm password. For password validation, we will use regular expressions and match password and confirm password in react js.
So, let's see password validation in react js using regex.
In this step, we will create react application using the following command.
npx create-react-app my-app
Now, we will create an App.js component file. In this file, we will write validation for password and confirm password.
src/App.js
import React from "react";
import "./styles.css";
class PasswordValidationForm 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()) {
console.log(this.state);
let input = {};
input["password"] = "";
input["confirm_password"] = "";
this.setState({ input: input });
alert("Form is submitted");
}
}
validate() {
let input = this.state.input;
let errors = {};
let isValid = true;
if (!input["password"]) {
isValid = false;
errors["password"] = "Please enter your password.";
}
if (!input["confirm_password"]) {
isValid = false;
errors["confirm_password"] = "Please enter your confirm password.";
}
if (typeof input["password"] !== "undefined") {
if (input["password"].length < 6) {
isValid = false;
errors["password"] = "Please add at least 6 charachter.";
}
}
if (
typeof input["password"] !== "undefined" &&
typeof input["confirm_password"] !== "undefined"
) {
if (input["password"] != input["confirm_password"]) {
isValid = false;
errors["confirm_password"] = "Passwords don't match.";
}
}
this.setState({
errors: errors
});
return isValid;
}
render() {
return (
<div class="main-div">
<h5>
How To Validate Password And Confirm Password In React JS - Websolutionstuff
</h5>
<form onSubmit={this.handleSubmit}>
<div class="form-group">
<label for="password">Password:</label>
<input
type="password"
name="password"
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 class="form-group">
<label for="password">Confirm Password:</label>
<input
type="password"
name="confirm_password"
value={this.state.input.confirm_password}
onChange={this.handleChange}
class="form-control"
placeholder="Enter confirm password"
id="confirm_password"
/>
<div className="text-danger">
{this.state.errors.confirm_password}
</div>
</div>
<input
type="submit"
value="Submit"
class="btn btn-success submit_btn"
/>
</form>
</div>
);
}
}
export default PasswordValidationForm;
In this step, we will import the component into the index.js file. Also, we will import bootstrap.
src/index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Now, we will add CSS to the styles.css file.
src/styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.main-div {
margin: 50px;
}
.submit_btn {
margin-top: 20px;
}
h5 {
margin-bottom: 20px;
}
input {
margin: 10px 0 10px;
}
Now, we will run the server using the following command.
npm start
Output:
You might also like:
In this article, we will see how to redirect another page using javascript. we will redirect the page to another pa...
Nov-04-2022
Hey everyone! Have you ever wanted to make your website's dropdown menus more interactive and user-friendly? Well, I...
Feb-19-2024
In this article, we will see how to check password strength using jquery. here we will check whether password ...
Sep-04-2020
In this article, we will see how to install Vue JS 3 in laravel 9. Laravel is a web application framework with...
Oct-07-2022