How To Validate Password And Confirm Password Using JQuery

Websolutionstuff | Sep-02-2020 | Categories : PHP jQuery HTML

In this article, we see how to validate password and confirm password using jQuery. Validation is a basic and important feature for authentication users. So here we will give you a demo about passwords and confirm password validation using jquery.

So, let's see how to check password and confirm password using jquery validation and how to match password and confirm password using jquery or javascript.

In jquery, we are using the keyup event to check whether the password and confirm the password is a match or not.

<html>
  <body>
      <head>
        <meta charset="utf-8">
        <title>How to validate password and confirm password in jquery - websolutionstuff.com</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      </head>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <h1>How to validate password and confirm password in jquery - websolutionstuff.com</h1><br />
            Enter Password <input type="password" class="form-control" id="Password" placeholder="Enter a password" name="password"><br /> <br / >
            Enter Confirm Password <input type="password" class="form-control" id="ConfirmPassword" placeholder="Enter a Confirm Password" name="confpassword" >
            <div style="margin-top: 7px;" id="CheckPasswordMatch"></div>
        </div>
      </div>
  <body>
</html>
<script>
$(document).ready(function () {
   $("#ConfirmPassword").on('keyup', function(){
    var password = $("#Password").val();
    var confirmPassword = $("#ConfirmPassword").val();
    if (password != confirmPassword)
        $("#CheckPasswordMatch").html("Password does not match !").css("color","red");
    else
        $("#CheckPasswordMatch").html("Password match !").css("color","green");
   });
});
</script>

Read Also: How To Check Email Already Exist Or Not In Laravel

And you will get output like the below image.

how_to_validate_password_and_confirm_password_using_JQuery.jpg