Fill-in-the-form web pages have the potential to generate frustration for both the customer and the business owner. Badly formed responses to questions can: delay product delivery; necessitate phone contact; cause returned Email replies; and just plain clutter up the database. And worse yet, the customer thinks they have supplied all the information and wonders why the business is not taking care of them! Poorly constructed form pages can act like guided missiles, when they should be guided missives.

This article discusses the use of form validation techniques beyond the scope of simply testing whether the form field is empty or not. We will consider what it might take to create reasonably thorough email and credit card validators. A similar process can be used for Phone, Social Security and other data. (For a general discussion of form validation please refer to our earlier Allaire article entitled "Building an Intelligent Contact Form").

While this article discusses JavaScript code, the same process and logic flow can be applied to ColdFusion code. The main difference being that JavaScript is client side and gives the user immediate feedback. ColdFusion, being server side code requires the form to be submitted before it can be checked. However in doing so, ColdFusion could access a database as part of the validation sequence. In many applications we use both client and server side data validation.

Scoping the Email validation

As a rule, it is best to perform the most general and simplest tests at the beginning of the code sequence. This reduces computer processing time and simplifies the more complex rules. In the example below we check the length of the text string before we test to see if the string has an @ or . (period) character.

In establishing the tests, first decide what characteristics are essential to a well formed response and in what order they should be checked. In the example of email validation we used the following criteria:

• Does the Email have a minimum of 9 characters? (ex.: cc@cc.cc, ccc@cc.cc)
• Does the @ symbol comes before the . (period)?
• Is the @ symbol at least the 3rd characters from the left?
• Is the last . (period) the 3rd or 4th character from the right?
• Are there at least two characters between the @ and the last . (period)?

The Email validation code

Code validation can be used in a variety of ways such as being part of an onChange() event handler or imbedded in a more comprehensive onSubmit() event handler. This article builds on our previous article (mentioned above) which validates an entire form when the submit button is clicked.

The code is written such that you can cut and paste them into your application ... with appropriate tweaking of course. The email validation function is called from an overall form validation function. The email validation returns a variable indicating whether the string in question passed the validation test. This first code snippet illustrates the overall form validation sequence. The email validation code is shown further below.

/* This is a snippet from our original article on building an intelligent contact form.
The main function is shown below. It's purpose in life is to examine each form element 
and determine if it is valid.  */

/* This function initializes the alert message parameters, sets the 'passed' variable
to true and initializes the form field which will receive the focus after an error 
has been acknowledged by the user. These parameters will be changed if any of the
validation tests fail. */

function isMailReady() {
   passed = true;  
   fieldtofocus = ""   ;
   message ="Please review the following required fields: \n";
   ...

/* Here we get the name of the form field being checked and pass it off to 
the isEmail() function which will validate its structure and value.  */

   var element = document.orderinfo.Email;
   var result = isEmail(element);

/*  The variable 'result' is returned by the isEmail() function. If the string 
was not properly formed then the variable 'result' will be false. The overall form
variable 'passed' is set accordingly.  */

   if (result)  {
      passed = false;
      if (fieldtofocus == "")  {fieldtofocus = document.orderinfo.Email};
   }
   ...

/* If the variable 'passed' is still true at the end of the various form field
checks then the form is submitted. Otherwise the alert with the message is displayed 
in the browser.  */

   if (passed == true)  {
      document.orderinfo.submit();
   }
   if (passed == false)  {
      alert(message);
      fieldtofocus.focus();
   }
}

-----------------   Begin Code Snippet   -----------------

/* The isEmail() function receives the name of the form field and then 
retrieves its value.  */
function isEmail(element)  {
   var inputStr = element.value;

/* The validation process determines if the email is less than 9 characters. 
If so, then it sets the return variable to true indicating a failed validation. 
It also adds the appropriate message to the existing message string.  */

   if (inputStr.length <9)  { 
      message +="- - Email should be at least 9 characters \n"; return true; }
   
   /*  Next, we check for the existence of the @ character */
   var charA = inputStr.indexOf("@");
   if (charA == -1)  {
      message += "- - Email did not find the @ character \n";
      return true;
   }

/*  Once it has been determined that there is an @ character, the validation 
process checks to see if it is it more than two characters in from the left 
side of the string. */

   if (charA <2 )  { 
      message +="- - Email expected at least 2 characters before the @ character \n";
      return true; }
   
   /*  The check continues to determine if a . (period) exists. It begins the 
   search from    the right side of the string.  */
   
   var charP = inputStr.lastIndexOf(".");
      if (charP == -1)  {
         message += "- - Email expected to find the . character \n";
         return true;
      }

   /*  Now that we have a . (period), is it at the proper place at the 
   end of the string. */
	
   if (charP != inputStr.length - 3 && charP != inputStr.length - 4)  {
      message += "- - Email ending . character not in correct position \n";
      return true;
   }

/*  Okay, now that we have both the @ and . (period) characters, are they 
separated by at least two characters?  */

   if (charP 
   
   /*  If none of the if statements detect a validation error, then the 
   'return' value of false is returned to the calling function which continues 
   with its script.  */
   
   return false;
}
-----------------   End Code Snippet   -----------------

Credit Card Validation

Let's look at a slightly different validation process. The determination of the authenticity of a if a credit card number requires a computational algorithm (beyond the scope of this article), however, one can validate the form and content of the credit card prior to authorization. In the code snippet below, the code checks for the following characteristics:

• Is the credit card number equal to 16 characters
• Does it contain only numbers
• Does the first digit represent a valid credit card type

-----------------   Begin Code Snippet   -----------------


/*  As with the previous validation function, this one is also called from an 
overall form validation routine  */

/*  The validation code determines if the credit card string is equal 
to 16 characters.  */
function isCreditCard(element)  {
   var oneChar;
   var inputStr = element.value;
   if (inputStr.length != 16)  {
      message += "- - Credit Card should have 16 digits \n";
      return true;
   }

/*  This next step uses a string manipulation method to test for character values. 
Since the credit card value is derived from a text input form field, the value will
be a string and not a numeric. In other situations where the card number, is in fact, 
a numeric type, the numeric type must first be converted to a string type.  */

/*  The code loops through all the characters to determine if any of them are 
outside the range of 0 to 9  */

   for (var i = 0; i < inputstr.length="" i="" {
      ="" onechar="inputStr.charAt(i);" 
         if="" (onechar=""><"0" || oneChar > "9") {
            message += "- - Credit Card must have only digits \n";
            return true;
         }
   }

/*  Here the validation process examines the first number of the card string to 
determine if it is a valid card type. In this case, the client does not accept 
American Express cards. (AMEX cards begin with the numeral 3).  */

   var cardType = inputStr.charAt(0);
   if (cardType == 3)  {
      message += "- - Sorry, but we do not accept American Express \n";
      return true;
   }
   if (cardType != 4 && cardType != 5 && cardType != 6)  {
      message += "- - Card type not recognized\n";
	  message += " - - - Expecting Visa, Master Card or Discover, \n";
      return true;
   }

/*  If no validation problems are encountered, the code returns a false 
to the calling function.  */
   return false;	
}
-----------------   End Code Snippet   -----------------

Data validation and the proffering of friendly guidance to data entry requires that a developer focus on the thinking patterns of consumers and not on how much code will be written. As shown above, two "simple" form field validators required some time and thought. However, once built, these code snippets become formidable tools in the craft of creating user-friendly web sites.

Web sites with thoughtful data validation have the capability to be compassionate to the foibles of the consumer. Rather than sending guided missiles, these web sites create guided missives which cajole and support the user/customer ... a big step in the direction towards a profitable web site.