Hack 27. Validate a Postal Code

Implement a client-side format validation for a ZIP Code.

This hack checks what the user has entered in a text field and makes sure that the value represents the proper format for a U.S. ZIP Code. We'll only look at the basics of validating a ZIP Code here. If you want to take it beyond just validating the format of a ZIP, you can use the code in "Fetch a Postal Code" [Hack #34], in the next chapter, as a secondary step to determine if the ZIP Code is actually the correct one for the specified city and state.

Figure 3-8 shows what this hack's web page looks like. It is a subset of the typical form that asks for the user's address information.

Figure 3-8. Enter the correct ZIP Code

The user enters zero to five digits in the text field (this hack tests only the first five digits of a ZIP Code), then presses Tab or clicks outside of the field. The application's code then automatically validates what the user typed.

The code makes sure that the user entered five digits, and only five digits, into the field. The web page imports a JavaScript file named hacks3_7.js, which contains the following code:

window.onload=function(  ){     var zip = document.getElementById("zip5");     var cit = document.getElementById("city");     zip.onblur=function(  ){         if(this.value && cit.value) {chkZipcode(zip.value);}         //validate actual zip code:         // httpRequest("GET","http://www.parkerriver.com/s/zip?city="+         //                       encodeURIComponent(cit)+"&state="+         //                       encodeURIComponent(_st),         //             true,handleResponse);     }; }; function chkZipcode(zipVal){     var re = /^\\d{5}$/;     if(! re.test(zipVal)) {         document.getElementById("message").                 innerHTML="<strong>Please enter a valid zip code.</strong>";     } } function handleResponse(  ){     var xmlReturnVal;     try{         if(request.readyState == 4){             if(request.status == 200){                 xmlReturnVal=request.responseXML;                 if(xmlReturnVal != null) {                     //validate entered zip code against this value                 }             } else {                 //request.status is 503                 //if the application isn't available;                 //500 if the application has a bug                 alert(                         "A problem occurred with communicating between"+                         " the XMLHttpRequest object and the server program.                 ");             }         }//end outer if     } catch (err) {         alert("It does not appear that the server "+               "is available for this application. Please"+               " try again very soon. \\nError: "+err.message);     } }

The window.onload event handler, triggered when the browser finishes loading the web page, sets up the behavior for the application. Within the window.onload event handler is an onblur event handler for the ZIP Code text field. This event handler is triggered when the user presses Tab or clicks outside of the ZIP Code field. The code verifies that the user has typed values into the city and ZIP Code text fields (if(cit.value && zip.value)), and, if so, validates the format of the ZIP Code value using chkZipcode( ).

This function uses a regular expression that represents a phrase made up of five numbers. The code tests the entered ZIP Code value against this regular expression to determine if the ZIP Code's format is correct.

A regular expression represents a template for testing strings of characters. The regular expression used here looks for a line of text made up of just five numbers (the ^ means "beginning of the line," and $ is a special symbol for "end of the line"). \\d is a predefined character class for a digit [09].

If the format is not correct, the code generates a user message. The web page code includes a div element with an id of message to contain these notifications:

var re = /^\\d{5}$/; if(! re.test(zipVal)) {     document.getElementById("message").             innerHTML="<strong>Please enter a valid zip code.</strong>"; }

Hacking the Hack

If you want to ensure that the five numbers represent a real ZIP Code, you can use the code in "Fetch a Postal Code" [Hack #34] to request a postal code for a certain city and state. That hack requests the ZIP from a web service; your code can then compare this value with the value entered by the user.

Some cities have multiple ZIP Codes, and "Fetch a Postal Code" [Hack #34] returns only the first ZIP Code found for a city/state combination. Therefore, this method is not a foolproof way of validating every ZIP Code value. You could alter the server component that connects with the web service to return all ZIP Codes found for a specified city, but this method would still require more user interaction to narrow down the choices to one ZIP Code.