Javascript Password Validation
April 19th, 2009 by Ian O'Donnell
Nothing is worse than spending forever googling for how to accomplish a certain task only to find pages that don’t answer your question. So just to clarify, here is what we will be covering.
- Checking Password Length
- Matching 2 password fields
- Giving the error to the user without reloading the page
And this is an Example too.
In the current state of web design it is extremely desireable to give errors to the user without reloading pages, especially when it comes to forms. This makes the experience smoother for the user which is what we should be aiming for.
First things first let’s just clarify the html page and css so we know all our field names etc. Here is the code I am using for this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <head>
<title>Validating Password</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body>
<form>
Password: <input type="password" id="pass1" value="" maxlength="20" onkeyup="chkpassword()" />
<br />
Enter Password again: <input type="password" id="pass2" value="" maxlength="20" onkeyup="chkpassword()" />
</form>
<div id="passwordAlert" ></div>
</body> |
Ok so the html isn’t the most elegant etc 
But this will serve perfect for our example don’t worry about it 
The script tags in the head element is where we will put our Javascript. This could of course be place in an external file but for testing it out it is quite often easier to leave it in the head element. Our css however is place in a seperate file but I shall provide that here now:
1 2 3 4 5 6 7 8 9 10 11 12 13 | body{
background-color: #464646;
color: white;
}
#passwordAlert{
color: red;
margin:5px;
display:none;
text-align:center;
background-color:#F5F5F5;
padding:5px;
} |
This is all we are going to need to get started. The only thing missing is of cours the JS. First we need to decide what we want to check for and that is:
- Checking Password Length
- Matching 2 password fields
- Giving the error to the user without reloading the page
So to check the length of the password we will only need to check one field, it makes sense for us to just check the first one as we will only be using the second field to ensure they match. Our function is going to be called everytime the user presses a key so we will need to take the value from the password field and check how many characters it has, If it has 6 or over, we allow the function to continue and go into more checks, if not we diplay an error. So let’s get started on step 1 and as I said, this will be going into the script tags in the head element:
1 2 3 4 5 6 7 8 9 10 11 12 | function chkpassword() {
var p1 = document.getElementById("pass1").value;
if(p1.length>5) {
document.getElementById("passwordAlert").style.display = 'none';
} else{
document.getElementById("passwordAlert").style.display = 'block';
document.getElementById("passwordAlert").innerHTML = ":( The password must be at least 6 characters long.";
}
} |
In that code above, we pull the value from the first field and place it into a var called p1. We get the value through the id which we said in the html code is ‘pass1′. Once we have that as a var there are certain methods we can call on it as it is a string. One of these is to check the length. So we called that method which returns an int with the number of chars and check if it is more than 5. If it is, then we keep our alertbox hidden by setting the display css style to ‘none’, if it is not then we unhide our alertbox, by setting the display style to ‘block’, and put a message into it to inform the user of the issue using .innerHTML, this completes the first step of our checks. Using .innerHTML to place a message inside our passwordAlert div then the page does not need to be reloaded, all the information stays in the form and the user gets instant feedback. This also covers the third of our goals.
Checking Password Length- Matching 2 password fields
Giving the error to the user without reloading the page
Our final check is to ensure that both passwords entered match. We already saw how to pull in the value from the form into a Javascript variable so basically we will need to do that for both of the fields and then check them against each other. We will only do this check once the first field is 6 characters long however.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function chkpassword() {
var p1 = document.getElementById("pass1").value;
var p2 = document.getElementById("pass2").value;
if(p1.length>5) {
document.getElementById("passwordAlert").style.display = 'none';
if(p1===p2){
document.getElementById("passwordAlert").style.display = 'none';
validpass="yes";
} else {
validpass="no";
document.getElementById("passwordAlert").style.display = 'block';
document.getElementById("passwordAlert").innerHTML = ":( Both passwords must match.";
}
} else{
document.getElementById("passwordAlert").style.display = 'block';
document.getElementById("passwordAlert").innerHTML = ":( The password must be at least 6 characters long.";
}
} |
The only difference this time is that we embedded another IF statement. It only gets called if the value in the first field is 6 or more characters long. We check both our variables, that are populated from the form, against each other. If they match, again, we leave our alert div hidden. However if they do not match, we unhide the div and give it a message to show the user.
And that is it. Those are all the basics involved. This is a very flexible system. You could hide the submit button until all checks are met for example. But most importantly, the instant feedback that the user recieves saves them both time and work, providing them with a smoother experience all around. The example and code was kept basic intentionally. By all means use the comment section to ask questions etc.
- No Comments »
- Posted in Coding
