PHP Technical

Password Validation Using JavaScript

Ankit

Welcome back to shortlearner.com, in this post we will see how can we check the insert password is correct before signup with the help of JavaScript function.Most of times the user forgets the password during signup,using this system we will ensure to the user that the password entered by him/her is correct or not.In this system we will create two text boxes.

change password in php

The values of the Password and Confirm Password Text Boxes are compared using JavaScript  and if the values do not match an error message is displayed in red  color inside the text box,and if the values are matched the text box color will appear in green color.

Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?

In the below example we will use the JavaScript onkeyup function, that can check what the user has entered in both fields and confirm that they have typed the same thing twice and visually confirm to the user that there is no problem with his/her password.put this below JavaScript  inside the <body> section of your html page.

<script type="text/javascript">
  function checkPass()
{
    //Store the password field objects into variables ...
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Set the colors we will be using ...
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(pass1.value == pass2.value){
        //The passwords match. 
        //Set the color to the good color and inform
        //the user that they have entered the correct password 
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match!"
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
}  
</script>

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Password Match Using javascript</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
  .heading {
    border-bottom: 1px solid #fcab0e;
    padding-bottom: 9px;
    position: relative;
}
.form-gap {
    padding-top: 70px;
}
</style>
</head>
<body>
        <div> 
        <div>
                    <div>
                        <div>
                            <div>Sign Up</div>
                            <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()" style="color: white;">Sign In</a></div>
                        </div>  
                        <div >
                            <h3><strong>Account</strong> Signup  <span></span></h3>
                            <form method="POST" action="signup.php">
          <div>
          <label for="email">Email *</label>
            <input id="email" placeholder="Enter Email Address " name="email" type="text" data-validation="email">
          </div>
          <div>
              <label for="email">Password *</label>
            <input id="pass1" placeholder="Enter Password " name="password" type="password" data-validation="password">
          </div>
            <div>
              <label for="email">Confirm Password *</label>
               <span id="confirmMessage"></span>
            <input  placeholder="Enter Password " name="password" type="password" data-validation="password" id="pass2" onkeyup="checkPass(); return false;">
          </div>
          <div>
          <input type="submit" name="signup" value="SIGNUP">
      </div>
        </form>
                         </div>
                    </div>
         </div> 
    </div>
    </div>
  </body>
 </html>