Previous Page
Next Page

Validating Zip Codes

Those wacky users can type almost anything into a form, so you'll want to make sure that if they entered anything into the Zip code field (Figure 7.11) that it contains only numbers. Script 7.14 shows you how.

Figure 7.11. You can make sure that the user either enters a Zip code or makes a selection from the scrolling list.


Script 7.14. Banish incorrect letters from your Zip codes with just a few lines of JavaScript.

window.onload = initForms;

function initForms() {
     for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
     }
     document.getElementById("sunroof").onclick = doorSet;
}

function validForm() {
     var allGood = true;
     var allTags = document.getElementsByTagName ("*");

     for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
           allGood = false;
        }
     }
     return allGood;

     function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split (" ");

        for (var j=0; j<allClasses.length; j++) {
           outClass += validBasedOnClass(allClasses[j]) + " ";
        }
        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
           invalidLabel(thisTag.parentNode);
           thisTag.focus();
           if (thisTag.nodeName == "INPUT") {
              thisTag.select();
           }
           return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
           var classBack = "";

           switch(thisClass) {
              case "":
              case "invalid":
                 break;
              case "reqd":
                 if (allGood && thisTag.value == "") classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "radio":
                 if (allGood && !radioPicked (thisTag.name)) classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "isNum":
                 if (allGood && !isNum (thisTag.value)) classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "isZip":
                 if (allGood && !isZip (thisTag.value)) classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "email":
                 classBack += thisClass;
                 break;
              default:
                 if (allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid ";
                 classBack += thisClass;
           }
           return classBack;
        }

        function crossCheck(inTag,otherFieldID) {
           if (!document.getElementById(otherFieldID)) return false;
           return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
        }

        function radioPicked(radioName) {
           var radioSet = "";

           for (var k=0; k<document.forms.length; k++) {
              if (!radioSet) {
                 radioSet = document.forms[k][radioName];
              }
           }
           if (!radioSet) return false;
           for (k=0; k<radioSet.length; k++) {
              if (radioSet[k].checked) {
                 return true;
              }
           }
           return false;
        }

        function isNum(passedVal) {
           if (passedVal == "") {
              return false;
           }
           for (var k=0; k<passedVal.length; k++) {
              if (passedVal.charAt(k) < "0") {
                 return false;
              }
              if (passedVal.charAt(k) > "9") {
                 return false;
              }
           }
           return true;
        }

        function isZip(inZip) {
           if (inZip == "") {
              return true;
           }
           return (isNum(inZip));
        }

        function invalidLabel(parentTag) {
           if (parentTag.nodeName == "LABEL") {
              parentTag.className += " invalid";
           }
        }
     }
}

function doorSet() {
     if (this.checked) {
        document.getElementById("twoDoor").checked = true;
     }
}

To make sure Zip codes are valid:

1. 
if (allGood && !isNum(thisTag. value)) classBack = "invalid ";
classBack += thisClass;



This goes into the isNum block of the switch/case conditional. If the entry is non-numeric, isNum() returns false.

2. 
if (allGood && !isZip(thisTag. value)) classBack = "invalid ";



This line has been added to the isZip switch/case block. If the field is not blank and it's not a Zip code, isZip() returns false.

3. 
function isNum(passedVal) {



First, define the function isNum. The variable passedVal was sent to the function from the form.

4. 
if (passedVal == "") {
  return false;
}



If passedVal is empty, then the field we're looking at isn't a number. When that happens, return false, signaling an error.

5. 
for (var k=0; k<passedVal.length; k++) {



Now scan through the length of passedVal, incrementing the k counter each time it goes through the loop. We're using k because we're already inside another loop.

6. 
if (passedVal.charAt(k) < "0") {
  return false;
}
if (passedVal.charAt(k) > "9") {
  return false;
}



The charAt() operator checks the character at the position k. If the character is less than "0" or greater than "9," it isn't a digit, so bail out and declare the input to be non-numeric, or false.

7. 
return true;



If we make it here, we've got a number, so we return true.

8. 
function isZip(inZip) {
  if (inZip == "") {
    return true;
  }
  return (isNum(inZip));
}



In the context of this form, it's valid for the Zip code field to be empty. Because of that, we first check the field to see if the user entered anything, and if they didn't, we return trueit's a valid entry. If they did enter anything, though, it needs to be numeric, so that's the next check.

Tips

  • If at some later point we wanted to add a new field to the HTML form that had to be numeric, no new JavaScript code would need to be written. Instead, we'd just use the now-existing isNum check.

  • Remember, it's the World Wide Web, not the American Web. If your site is likely to draw attention from outside the United States, don't require that the user enter a Zip code. Addresses outside the United States may or may not have postal codes, and those postal codes may not be numeric.



Previous Page
Next Page