An Email Address Validation Javascript

Push the View Source button to view the source of the entire page.

Validating Email Addresses

version 2

Virtually every web application designer has at least one thing in common -- the desire to get the user's email address. While most users are capable of entering their addresses without any difficulty, the occasional typo or memory lapse will creep into a well-designed form, thereby causing havoc. Although the script below does not check for every contingency, it will catch many of the possible errors.

Thanks to Johnathan Grant of the UK & Jim Fuqua of the US whose same-day emails forced me to rethink the script, I have expanded the analysis to allow for the following type of email address: "fname.lname@dom.123.12" (I guess this is what is meant by user input.) As a result, the validation is now limited to the following six characteristics:

There must be a user name, a domain name, and a suffix
The first two must be separated by a "@" (at)
The last two must be separated by a "." (dot)
The domain name must have a length of at least three
The suffix must have a length of two (uk,au,nz,etc) or three (net, com, edu, org)
The script now suspends checking for the relative placements of the "dot" and "at" with a confirm pop-up.

If you would like to some recommendations regarding using the validEmail() function with a submit form, Click here.

The Form

The code

The text field uses the onblur event handler to call validEmail() with the email address value entered by the user. If the returned result is false, the focus is reset to the field.

   <input type="text" size="25" name="email"
   onblur="if(!validEmail(this.value)) this.focus();">

The complete javascript function -- validEmail() -- follows: (Note: the confirm and alert messages should be one-line commands; they are broken here for display purposes only.)



   var chkDot = true;
   var usEmail = true;
   function validEmail(eAddr) 
   { 
      var lenSuffix = (usEmail) ? 4 : 3;
      var result = false;
      var ndxAt = ndxDot =  0;
          
      ndxAt  = eAddr.indexOf("@");
      ndxDot = eAddr.indexOf(".") ;
      ndxDot = eAddr.lastIndexOf(".") ;
          
      if ((ndxDot < 0) || (ndxAt < 0))
         alert("Your email address lacks '.' or '@'.
              \n\nThe format is 'you@dom.suf'"); 
      else if (chkDot && (ndxDot < ndxAt) )
         chkDot = !( 
            confirm("You entered a 'dot' before
            the '@'\nAre you sure that is 
            right?") );
      else if ( (ndxDot2 - 3) <= ndxAt)
         alert("You may be missing your domain name.
            \n\nThe format is 'you@dom.suf'");
      else if (tmpStr.length < ndxDot2 + lenSuffix) 
         usEmail = !(
           confirm("You have fewer than 3 characters
           as a domain suffix.\nAre you sure that is
           right?") );
      else 
           result=true; 
          
      return result; 
   }

The Analysis

Note that the variables chkDot and usEmail are declared globally. Because they control the flow of the if/else statements, their values must be maintained separately. If they were declared as local variables, their values would be reset automatically with each call to the function. They are initially set to true for egocentric nationalistic reasons; that is, the majority of email addresses in the U.S. do not have a "dot" before the "at", and they end with 3 letter suffixes. (Whatever happened to the global village or even the Woodstock Nation?)

var chkDot = true;
var usEmail = true;

The first few lines within the function declare and initialize the local variables. The goodAddr variable is the value that will be returned; it is set to false because the presumption is that the user entered a bad address. The variable lenSuffix will be set to an appropriate value, dependent upon the value of usEmail. The "ndx" variables will be set to the index of their respective characters -- "@" and ".".

   var lenSuffix = (usEmail) ? 4 : 3;
   var goodAddr = false;
   var ndxAt = ndxDot = ndxDot2 = 0;

The next three lines find the location of the "@" (at) and "." (dot) within the string. If they aren't found, javascript will set the ndx variables to -1.

   ndxAt  = eAddr.indexOf("@");
   ndxDot = eAddr.indexOf(".") ;
   ndxDot2 = eAddr.lastIndexOf(".") ;

The next few lines test the string for some common errors, based upon the analysis discussed above.

The following pair of lines executes an alert message if either of the two characters are not found.

   if ((ndxDot < 0) || (ndxAt < 0))
      alert("Your email address lacks '.' or '@'.
      \n\nThe format is 'you@dom.suf'");

This next series of statements is processed only if the chkDot variable is set to true. The test is to see if the characters were placed in the proper order; that is, "@" (at) before "." (dot) If not, a confirm() is executed. Note how chkDot's value is reset. Whatever the value returned (true or false), the chkDot variable is set to the opposite by using the "!" (not) symbol.. Since the variable is global, it will remain reset for any future calls to the function.

  else if (chkDot) && (ndxDot < ndxAt) )
     chkDot = !( 
        confirm("You entered a 'dot' before
        the '@'\nAre you sure that is 
        right?") );

The following test checks for the presence of a domain name. As stated in the analysis, the presumption is a length of at least three.For this and the next test, we use the index of the last "dot" in the address.

   else if ( (ndxDot2 - 3) <= ndxAt)
      alert("You may be missing your domain name."
        \n\nThe format is 'you@dom.suf'");

The final test is to check for the existence of a domain suffix. Again the presumption is a length of three. If, however, the user enters fewer characters, a confirm() is executed. And as with the symbol placements above, the result is flipped and assigned to a global variable, in this case (usEmail)

   else if (eAddr.length < ndxDot2 + lenSuffix) 
      usEmail = !( 
           confirm("You have fewer than 3 characters
           as a domain suffix.\nAre you sure that is
           right?") );

If the string passes all of the tests, the variable goodAddr is set to "true". The final step is to return the result.

   else 
     goodAddr=true; 
          
   return goodAddr;

As I stated at the start, the routine will not catch every error. However, the basic design is there, and with a little work on your part it can be made more robust. Just remember: the more validation you override, the more possible errors you allow. If you would like to see the validator within a script, [Email Form]