Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples


Form Validation

by Paul Adams and Apple Developer Connection
08/10/2001

Any sort of interactive site is going to have form inputs -- a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end -- a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you've invested in. Whatever system is back there, you can bet that it doesn't appreciate having its time wasted with bogus information, and chances are the user doesn't appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag -- typically several seconds -- before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message.

If you run a little preliminary validation of the user's form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn't have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere.

Double-checking the data on the server remains necessary, in case the user has turned JavaScript off or somehow finds a way to circumvent the client-side validation, either maliciously or by accident. For the majority of your users, JavaScript form validation will save a lot of time up front.

The Script's Purpose

This script accompanies an HTML form. When the user clicks the Submit button on the form, the form data is sent to a JavaScript validation function that checks each aspect of the input to make sure that it is in the appropriate format. Each form element is evaluated according to specified criteria. If the script finds an error in one of the fields, it sends back a warning explaining how the string doesn't conform. The fairly robust string-handling and regular-expression techniques available in JavaScript handle this checking process.

checkWholeForm()

A master function, called checkWholeForm() is placed at the top of the page that contains a form.

function checkWholeForm(theForm) {
    var why = "";
    why += checkEmail(theForm.email.value);
    why += checkPhone(theForm.phone.value);
    why += checkPassword(theForm.password.value);
    why += checkUsername(theForm.username.value);
    why += isEmpty(theForm.notempty.value);
    why += isDifferent(theForm.different.value);
    for (i=0, n=theForm.radios.length; i<n; i++) {
        if (theForm.radios[i].checked) {
            var checkvalue = theForm.radios[i].value;
            break;
        } 
    }
    why += checkRadio(checkvalue);
    why += checkDropdown(theForm.choose.selectedIndex);
    if (why != "") {
       alert(why);
       return false;
    }
return true;
}

This function calls a series of subfunctions, each of which checks a single form element for compliance with a specific string format and returns a message describing the error. If the function returns an empty string, we know the element complies.

checkUsername()

Here's the routine that checks to see if the user entered anything at all in the username field. (We'll use the same routine to check each form field for blankness.)

function checkUsername (strng) {
 var error = "";
 if (strng == "") {
    error = "You didn't enter a username.\n";
 }

We pass the value of the username field to this function, which compares that value to an empty string (""). If the two are the same, we know that the username field is blank, so we return the warning string to our master function. If it's not blank, we move along to the next hurdle. We want to permit only usernames that are between 4 and 10 characters. We check the length of the string, and reject it if it's too short or too long.

if ((strng.length < 4) || (strng.length > 10)) {
    error = "The username is the wrong length.\n";
}

Comment on this articleCertainly using form validation before the CGI script is submitted to the server is nothing new, but it remains valuable. Are you using any variations on this theme?
Post your comments

Next, we want to forbid certain characters from appearing in usernames. Specifically, we want to allow only letters, numbers, and underscores. We can test for that using regular expressions and the test() method. The regular expression functions found in JavaScript 1.2 are similar to Perl's regular expressions, with a bit of simplification when it comes to syntax. If you know Perl, you should have no trouble wielding JavaScript's regular expressions. The JavaScript regular expression /\W/ is a standard character class that's handily predefined to mean "any character other than letters, numbers, and underscores." So we set the variable illegalChars equal to that regular expression, and then test the username string against that variable to see if a match is found. If it is, we throw up a warning.

var illegalChars = /\W/;
  // allow only letters, numbers, and underscores
    if (illegalChars.test(strng)) {
       error = "The username contains illegal characters.\n";
    } 

By now, we've run the username through three tests. If it's passed all three, it's OK by us. We give the username a passing grade and move along to the next field.

checkPassword()

For the password field, we want to constrain the length again (this time, we'll keep it between 6 and 8 characters), and we want to allow only letters and numbers -- no underscores this time. So we have to use a new regular expression to define which characters we're banning. This one, like the last one, includes \W -- everything but letters, numbers, and underscores -- but we also need to explicitly mention underscores, so as to permit only letters and numbers. Hence: /[\W_]/.

function checkPassword (strng) {
 var error = "";
 if (strng == "") {
    error = "You didn't enter a password.\n";
 }
    var illegalChars = /[\W_]/; // allow only letters and numbers
    if ((strng.length < 6) || (strng.length > 8)) {
       error = "The password is the wrong length.\n";
    }
    else if (illegalChars.test(strng)) {
      error = "The password contains illegal characters.\n";
    }

When it comes to passwords, we want to be strict with our users. It's for their own good; we don't want them choosing a password that's easy for intruders to guess, like a dictionary word or their kid's birthday. So we want to insist that every password contain a mix of uppercase and lowercase letters and at least one numeral. We specify that with three regular expressions, a-z, A-Z, and 0-9, each followed by the + quantifier, which means "one or more," and we use the search() method to make sure they're all there:

else if (!((strng.search(/(a-z)+/))
  && (strng.search(/(A-Z)+/))
  && (strng.search(/(0-9)+/)))) {
  error = "The password must contain at least one 
    uppercase letter, one lowercase letter,
    and one numeral.\n";
  }

checkEmail()

Related Reading

JavaScript: The Definitive Guide, 4th EditionJavaScript: The Definitive Guide, 4th Edition
By David Flanagan
Table of Contents
Index
Sample Chapter
Full Description

Next we want to see if the email address the user entered is real. The most effective way to do this is to go out on the Net and ask the domain the user claims to hail from if that the person actually has an account. But this takes a big toll on the machine that's running the checks -- and it isn't possible with JavaScript anyway. With JavaScript we can check to see if the email string looks like an email address. We want it to follow this format: some characters, then an at symbol (@), then some more characters, then a dot (.), then two or three more characters, and that's it. This won't be perfect validation --it is possible to slip phony non-RFC-compliant addresses by it -- but it's normally good enough. If the pattern doesn't match, we reject the email address.

The regular expression that expresses the format goes something like this: /^.+@.+\..{2,3}$/. The carat (^) means the start of the string and the dollar sign ($) means the end of the string. By surrounding the rest of the regular expression with these characters, we ensure that we evaluate the entire string, rather than just a portion. Each .+ means "at least one character" -- the dot (.) means "any character"" and the plus sign (+), you recall, means "one or more." The .{2,3} portion means "two or three characters." And when we want to match a literal dot, we need to escape the character with a backslash. That's why we have \. there.

var emailFilter=/^.+@.+\..{2,3}$/;
if (!(emailFilter.test(strng))) { 
       error = "Please enter a valid email address.\n";
}

Again, we want to check to make sure that no forbidden characters have slipped in. For email addresses, we're forbidding the following: ( ) < > [ ] , ; : \ / "

var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
if (strng.match(illegalChars)) {
   error = "The email address contains illegal characters.\n";
}

checkPhone()

To validate a phone number, first we want to clear out any spacer characters, such as parentheses, dashes, spaces, and dots. We can do this with a regular expression and the replace() method, replacing anything that matches our regular expression with a null string. Having done that, we look at what we have left with the isNaN() function (which checks to see if a given input is Not A Number), to test if it's an integer or not. If it contains anything other than digits, we reject it.

var stripped = strng.replace(/[\(\)\.\-\ ]/g, '');
//strip out acceptable non-numeric characters
if (isNaN(parseInt(stripped))) {
   error = "The phone number contains illegal characters.";
}

Then we count the length of the number. It should have exactly ten digits -- any more or less, and we reject it.

if (!(stripped.length == 10)) {
	error = "The phone number is the wrong length.
	  Make sure you included an area code.\n";
}

isDifferent()

We want to do a few more kinds of validation. If you present a license or something similar in a text box for the user to accept, you want to make sure that it hasn't been altered when the form is submitted. That's done very simply by comparing the submitted string with the string you were expecting.

function isDifferent(strng) {
  var error = "";
  if (strng != "Can\'t touch this!") {
     error = "You altered the inviolate text area.\n";
  }

Alternately, you can use the onChange() method to catch the user in the act of modifying the text and stop them before they submit the form.

checkRadio()

To make sure that a radio button has been chosen from a selection, we run through the array of radio buttons and count the number that have been checked. Rather than sending the whole radio object to a subfunction, which can be problematic (because the radio object has no property indicating which value has been chosen), we pre-process the radio form element in a for loop and send that result to a subfunction for evaluation.

for (i=0, n=theForm.radios.length; i<n; i++) {
   if (theForm.radios[i].checked) {
      var checkvalue = theForm.radios[i].value;
      break;
   }
}
why += checkRadio(checkvalue);
 
function checkRadio(checkvalue) {
var error = "";
   if (!(checkvalue)) {
       error = "Please check a radio button.\n";
    }
return error;    
}

check Dropdown()

Finally, we want to make sure that the user has selected an option from our drop-down menu (and not the first option, which isn't an option at all, but just a "Choose one" header). For this, we use the select object's selectedIndex property, which returns the index of the selected option. If the index is 0, we reject the input.

function checkDropdown(choice) {
    var error = "";
    if (choice == 0) {
       error = "You didn't choose an option
         from the drop-down list.\n";
    }    
return error;
}

Coding Challenges

Validation basically consists of comparing one thing to another, which is easy, especially with JavaScript. The part that requires a bit of ingenuity is creating the regular expressions. The more complex the expression, the harder it is to write. After some practice and immersion in the world of regular expressions, though, they can become second nature.

Code and Example:

View source of validate.js.

Try an example form.

Validation also comes in more complex flavors than we've covered here. For example, you may wish to validate a credit card number. An algorithm called the Luhn modulus-10 formula checks the validity of a given credit card number. In a case like this, there's no need to re-invent the wheel. You can grab a simple script from brainjar.com or a more complete version from JavaScript Source.

Using The Script

All of the functions are included in a file called validate.js, which can be called with the SRC attribute of a SCRIPT tag at the top of the form page. Or, if you wish, you can paste the contents of this file into the top of your HTML page. If you prefer, you can validate each form element as soon as the user moves on to the next element using the onBlur() event handler instead of onSubmit(). As always, remember to validate important form data on the back end as well, because most efforts at client-side validation can be spoofed.

Paul Adams is a freelance writer. He regularly contributes to a number of publications on topics including web programming, graphics, technology, and design.


Return to the JavaScript and CSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.