Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
This example demonstrate password and confirm password is match or not both in jQuery and javascript. We will display realtime success message if both password field is match also show warning message if password and confirm password is not match. I will explain how we do this using both of jQuery and javascript. We also use Bootstrap5 for a better design and display realtime success and error message.
How it works ?
First we have to enter a password in the password field. After that we will enter another password into confirm password field. If the password and confirm password match we will see a realtime green message Password match ! , if not then see a red message Password does not match !
HTML Markup:
<form>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="text" class="form-control" id="password">
</div>
<div class="mb-3">
<label for="confirm_password" class="form-label">Confirm Password</label>
<input type="text" class="form-control" id="confirm_password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
jQuery Script:
<script>
$(document).on('keyup', '#confirm_password', function () {
let password = $("#password").val();
let confirm_password = $("#confirm_password").val();
if (password != confirm_password) {
$("#check_password_match").html("Password does not match !").css("color", "red");
} else {
$("#check_password_match").html("Password match !").css("color", "green");
}
});
</script>
Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Check password and confirm password by WebJourney</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="offset-md-3 col-md-6">
<span id="check_password_match"></span>
<form>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="text" class="form-control" id="password">
</div>
<div class="mb-3">
<label for="confirm_password" class="form-label">Confirm Password</label>
<input type="text" class="form-control" id="confirm_password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('keyup', '#confirm_password', function () {
let password = $("#password").val();
let confirm_password = $("#confirm_password").val();
if (password != confirm_password) {
$("#check_password_match").html("Password does not match !").css("color", "red");
} else {
$("#check_password_match").html("Password match !").css("color", "green");
}
});
</script>
</body>
</html>
Output:
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support