Validating Email Addresses

Validating entries that your viewers put into forms will not only help to minimize the garbage that tricksters like to submit, it also helps your users in case they make a typo and also helps to ensure that you get the data mailed to you that you need. First, we'll get into what is probably the most important form entry you will have, the user's email address.

In order to validate an email address the following code is used:

Don't get too worried about the complexity of the line above, we'll just take it apart a little at a time, sort of divide and conquer it. First of all, eml_val is simply a name for a variable that I picked out of the air to stand for email validate... you can call it whatever you want, as long as it is not a javascript keyword, as with any variable.

You may recall from the Basic javascript tutorial that variables merely set the value of the variable, re in this case, to the expression or values that are to the right of the 'equals' sign. Regular expressions always begin and end with a forward slash /. These forward slashes tell the browser's Javascript interpreter that all the code between the slashes are a regular expression.

The caret ^ means that what follows will be an expression to examine a string, in this case the format of an email address entered into a form.

The symbol \w means any single character, lower case a through z, upper case A through Z, the numbers 0 through 9, or an underscore _ will be allowed as being valid entries. The back slash '\' and the 'w' go together as a single unit.

In other words, the email address must start with, and only contain, one of these allowed characters.

The plus sign + stands for one or more of what the previous sign stands for; in other words, one or more of the characters allowed by the symbol '/w'.

Still with me so far? Remember, you don't have to soak all this up at one time, and later on I'll give you a link to a table of all the symbols and their definitions, that you can print out for a reference.

Next, the opening parenthesis ( signifies that a group of characters follows, which is considered a separate unit in much the same way that an algebraic equation uses parentheses. Everything from the opening parenthesis and the closing parenthesis is a part of this group.

The brackets [ ] signify that you can have only one character referenced inside them. Here you see we have the characters \.- inside the brackets; this is to allow the user to use either a period or a dash in the name, but not both. Periods, or dots if you prefer, have a special meaning in Javascript, as in "document.write" for example, so it must be escaped. A back slash in front of a special character is used to escape the character, or in other words, to tell the Javascript engine that in this special case, the period is not being used as a special character. The dash, not being a special character, does not need to be escaped.

The question mark means that either zero (none) or one of the previous items can be allowed... to put it another way, up until now we have allowed the user to either have a period or a dash in his user name, or neither.

Next, we again used the characters '\w+'. which means that the period or dash must be followed by some other letters or numbers as described above.

The closing parenthesis marks the end of our group in the expression....

....and here is where we are so far in the expression, with the whole group in red:

Following our group comes the asterisk * which means that zero or more of whatever is allowed in the group will be allowed. For example, "joe" would be a valid user name, and so would "j-o-e" or "joe.5".

The '@' character is not a special character here, just the usual separator between the user name and domain of the address.

The \w+ used again here says that the domain name must start with one or more of the same allowable characters as in the above example, any single character, lower case a through z, upper case A through Z, the numbers 0 through 9, or an underscore _.

Again, we insert another group which is a carbon copy of the first group and makes the same rules for character entry as our first group. Things should be looking a little simpler to you now right? The main thing to remember here again is to escape the period; otherwise, things won't go right at all.

Now we come to another group within a set of parentheses. The first symbol is another escaped period, \. which denotes the 'dot' in a 'dot.com' or whatever. Next we have the \w symbol again, denoting allowable characters. And finally, the numbers in the braces {2,3} mean that there may be the dot followed by either 2 or 3 of the previous item (denoted by the \w, for letters, undescore or numbers). Finally we close the group with the trailing parenthesis.

Right after this last group we have a plus sign +, again meaning that the previous item-- the group in this case-- must exist one or more times, thus allowing a match for ".com", ".cc", ".net", "ac.uk" and so on. Then, we end with a dollar sign $, denoting that the matched string has to end right here... this prevents the validation an email address that starts off correctly, but has other characters, four-letter words etc., at the end. And speaking of ends, the final forward slash / is used to enclose and denote the end of the expression.

There! That wasn't so hard, was it? And here is a sample function you can use to execute the email validation in your forms:

<script language="javascript" type="text/javascript">
<!--
eml_val = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

function checkit(thisForm) {
if (eml_val.test(thisForm.emailAddr.value)) {
return true
}

alert("Invalid E-mail Address!")
thisForm.emailAddr.focus()
thisForm.emailAddr.select()
return false
}
//--></script>

You can call the function from your form like this:

<FORM onSubmit="return checkit(this)" ACTION="Whatever Action.cgi">