A Simple Javascript Password Validator
Ever want to quickly and easily confirm that a user has entered the same password in the Password and Confirmation fields? This simple JavaScript Tutorial will show you how to do just that. Using the onkeyup event, we can check what the user has enterd 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 password.
Here is an example:
Here is the HTML from that example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <link rel="stylesheet" type="text/css" href="/code_examples/tutorial.css"><script type="text/javascript" src="/code_examples/passtest.js"></script><div class="tutorialWrapper"> <form> <div class="fieldWrapper"> <label for="pass1">Password:</label> <input type="password" name="pass1" id="pass1"> </div> <div class="fieldWrapper"> <label for="pass2">Confirm Password:</label> <input type="password" name="pass2" id="pass2" onkeyup="checkPass(); return false;"> <span id="confirmMessage" class="confirmMessage"></span> </div> </form></div> |
And, here is the Javascript from that example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| 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!" }} |
The JavaScript is short and simple. Let's break it down.
Get The Elements
First, we assign the document object for each of the password fields and the confirmation message into variables. Rather than just getting the values of each of the password fields, the script gets the entire document object. This will allow us to change other properties of the object later on.
Two other variables are created in the script as well, the 'Good Color' and the 'Bad Color.' Since we will be using each of them more than once, it is beneficial to put them into variables. If the colors ever need to be changed, they can easily be changed in one place.
Check the Values
Comparing the values of the pass1 and pass2 objects will tell us whether or not the password is the same. If the passwords are the same, the confirmation message is set to "Passwords Match!" and the colors are set to green. If the values do not match, the message is set to "Passwords Do Not Match!" and the colors are set to red.
Looking at the Form
The form uses the onkeyup event to call the checkPass() function. This will compare the values in the two fields everytime a key is released in the confirmation field.
Extending the Script
Changing the colors is a great visual identifier for the user, but for added security, the script could be extended to disable the form submit button or alert the user before they submit the form if the passwords do not match. The script and form could also be changed to use images for the confirmation rather than text. For example:
This is one of the simplest ways to validate a password before the user submits the form. Of course, it is always good practice to do server-side validation as well.
