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:

?Download html.txt
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 :P

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 Read the rest of this entry »

, , , , , , , , , , , , , , , , , , , , , ,