Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to implemente confirm password functionality with jQuery?

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 332
    Comment on it

    At the time of registration or change password we need to provide password, so for this we usually implement Confirm password functionality.

    Example: In the below example I want to confirm password on form submit, so for this I have created a function matchPasswords() to match the passwords and added the onSubmit handler to form. This function will check whether the passwords are matched or not, if not then it will display an error message otherwise it alerts saying "Passwords Matched!"

    <html> 
      <head> 
        <title>Demo Confirm password</title> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript"> 
          function matchPasswords() {
                var pass1 = $("#password").val();
               var pass2 = $("#retypePassword").val();
                var isMatched = true;
            if (pass1 != pass2) {
            $("#confirmPass_error").text("Passwords don't match.");
            $("#retypePassword").css({"borderColor":"#E34234"});
            isMatched = false;
                }
               else {
                alert("Passwords Matched!");
               }
               return isMatched;
          }
        </script>
        <style>
        .error{color: #db4437;font-size:12px;}
       </style>
      </head> 
      <body> 
          <form name="changePassword" id="changePassword" onsubmit="return matchPasswords();">
              <div class="form-group form-group-space">
                <label for="inputEmail3" class="col-xs-4 control-label">New Password</label>
                <div class="col-xs-8">
                  <input type="password" id="password" class="form-control" placeholder="New Password">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-xs-4 control-label">Retype Password</label>
                <div class="col-xs-8">
                  <input type="password" id="retypePassword" class="form-control" placeholder="Retype Password">
                  <span id="confirmPass_error" class="error"></span>
                </div>
              </div>         
              <div class="form-group">
                <label for="inputEmail3" class="col-xs-4 control-label voting">&nbsp;</label>
                <div class="col-xs-8">
                  <button type="submit" class="btn btn-default comment-text">Change password</button>
                </div>
              </div>
            </form>
      </body> 
    </html>
    

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: