Password Validation Using JavaScript

By
Ankit
-
24
64453

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>

RELATED ARTICLESMORE FROM AUTHOR

24 COMMENTS

  1. Thank you for any other great post. The place else may anyone get that kind
    of info in such a perfect way of writing? I’ve a presentation next week, and I’m at the search for such info.

  3. I do accept as true with all of the ideas you’ve offered
    for your post. They’re very convincing and can definitely work.
    Still, the posts are very quick for newbies. May you please extend them a little from subsequent time?

    Thanks for the post.

  10. Hello, i think that i saw you visited my blog so i came to “return the favor”.I am trying to
    find things to enhance my site!I suppose its ok to use a few of your ideas!!

  12. I like everything what is said and I support it a lot. I am glad to be here and to share my opinion.
    This site I like too:

    [url=https://freesexdb.com/]סרטי סקס לצפייה ישירה[/url]

  14. I like this point of view as it has a lot of sense!

    [url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%96%d7%9b%d7%a8%d7%95%d7%9f-%d7%99%d7%a2%d7%a7%d7%91/]נערות ליווי בזכרון יעקב[/url]

  17. When I opened this website I could not imagine that it is so informative.

    [url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%94%d7%95%d7%93-%d7%94%d7%a9%d7%a8%d7%95%d7%9f/]נערות ליווי בהוד השרון[/url]

  18. Great beat ! I would like to apprentice while you amend your website, how could
    i subscribe for a blog website? The account aided me a acceptable deal.

    I had been tiny bit acquainted of this your broadcast provided bright
    clear concept

  19. I like everything in here and I visit this site every day.

    [url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%98%d7%91%d7%a8%d7%99%d7%94/]נערות ליווי בטבריה[/url]

  21. I’m curious to find out what blog platform
    you’re utilizing? I’m experiencing some minor security problems with my latest site and I
    would like to find something more secure. Do you have any solutions?

  22. I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire
    someone to do it for you? Plz reply as I’m looking to construct my own blog and would
    like to find out where u got this from. many thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here