DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Validate Password And Confirm Password Using JQuery

In this tutorial I will show you how to validate password and confirm password using jquery. Validation is basic and important feature for authenticate user. 

So, here I will give you example about password and confirm password validation using jquery. In user registration process, we need to validate password and confirm password validation for cross checking.

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

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

<html>
  <body>
      <head>
        <meta charset="utf-8">
        <title>How To Validate Password And Confirm Password Using JQuery - techsolutionstuff.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"> 
<h4 style="margin-top:50px;"><b>How To Validate Password And Confirm Password Using JQuery - techsolutionstuff.com</b></h4><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>

Enter fullscreen mode Exit fullscreen mode

Read Also : How To Generate Barcode In Laravel


And you will get output like below image.

how_to_validate_password_and_confirm_password_using_jquery


You might also like :

Top comments (0)