While playing round with a user registration form, which contained 2 fields for specifying the password the other day, I decided that it would be extremely useful to have some kind of mechanism that verifies whether or not the user has entered the password correctly twice. While thinking about using Cold Fusion to this, I had certain reservations, mainly that it seemed silly to use the power of Cold Fusion to do such a seemingly simple task and to hit the server again just to validate such a field. There must be a better way of doing this and the answer lies in Javascript (JS).

The benefits of using JS over Cold Fusion for this task become immediately apparent, when you consider that the validation is done on the client side and hence all verification and notification is done locally (no need to hit the server to validate your entries and maybe incur a return trip to inform the user of the errors). In the following I shall describe the steps I took without going into too much detail of the JS language. So let’s get started.

First off we’ll look at the script:

<SCRIPT LANGUAGE=”JavaScript”>
<!– Hide script from older browsers
  function valid(form){
   var field = form.password1;
   var field2 = form.password2;
   if (field.value == “”) {
      alert(“You must enter a password.”);
      field.focus();
      field.select();
      return false;
   } else if (field2.value == “”) {
      alert(“You must enter a password for the re-type field too.”);
      field2.focus();
      field2.select();
      return false;
   } else if (field.value == field2.value) {
      return true;
   } else {
      alert(“Your passwords don’t match up. Please re-type your passwords making sure they match up”);
      field.focus();
      field.select();
      return false;
   }
}
//–>
</script>

The script starts of by defining a function and in the first few lines I created a couple of variables, that stored the values of the form fields password1 and password2. Then we have our first if statement which checks to see if any information has been entered into password1. If the outcome is negative (i.e. there is no value stored) and an alert box pops up and informs the user of the requirement to enter a password (i.e. you can’t have blank passwords). Clicking OK will move the cursor to that field to help the user find where he went wrong. Next we do the same thing but for password2.

Right so far we have just been making sure that the user has entered any information. The second else if statement is actually going to compare the variables that store password1 and password2. If this true continue submitting the information, else pop up an alert, informing the user of the non-matching passwords and set the focus back to the form and on field password1.

Right, now we have the script, but how do we call it? The easiest way is to call it when the user submits the form. Just take a look at the following HTML snippet:

<FORM action=”password.html” method=”post” onSubmit=”return valid(this)”>
Enter password: <INPUT type=”password” name=”password1” size=”20”>
Re-type password: <INPUT type=”password” name=”password2” size=”20”>
<INPUT type=”submit” value=”submit”>
</FORM>

The line of interest is the opening <FORM> tag. You will notice toward the end of it the statement onSubmit=”return valid(this)”, which tell the browser to call the function valid when the form is submitted. The function runs and validates the entries. Hey presto, you have a script that ensures passwords submitted to your app are identical.

Now that wasn’t to bad, was it? The hardest part I found, not having used JS, was figuring out the syntax. If this has wet your appetite for more JS, then I can recommend a book: JavaScript from O’Reilly & Associates, Inc, this is pretty much the bible and contains everything you need to know to get started in the world of JS. Time to say goodbye and I hope you enjoyed this article.