Previous Page
Next Page

Formatting and Validating Strings

Regular expressions can be used to simultaneously format and validate an entered value. In Script 8.7, the user enters a phone number in any format. Either the end result will be a formatted phone number or the input box will turn red and the label will turn red and bold.

Script 8.7. This script validates and formats a user-entered phone number.

[View full width]
window.onload = initForms;

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

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

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

     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();
           }
        }

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

           switch(thisClass) {
              case "":
              case "invalid":
                 break;
              case "phone":
                 if (!validPhone(thisTag.value)) classBack = "invalid ";
              default:
                 classBack += thisClass;
           }
           return classBack;
        }

        function validPhone(phoneNum) {
           var re = /^\(?(\d{3})\)?[\.\-\/ ]?  (\d{3})[\.\-\/ ]?(\d{4})$/;

           var phoneArray = re.exec(phoneNum);
           if (phoneArray) {
              document.getElementById ("phoneField").value = "(" + phoneArray[1] + ") " + 
 phoneArray[2] + "-" +  phoneArray[3];
              return true;
           }
           return false;
        }

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

To format and validate a phone number:

1. 
var re = /^\(?(\d{3})\)?[\.\-\/ ]?  (\d{3})[\.\-\/ ]?(\d{4})$/;



This regular expression looks for a string that has:

  • An optional left parenthesis \(?

  • 3 digits (\d{3})

  • An optional right parenthesis \)?

  • An optional period, dash, forward slash, or space [\.\-\/ ]?

  • 3 digits (\d{3})

  • An optional period, dash, forward slash, or space [\.\-\/ ]?

  • 4 digits (\d{4})

This pattern is anchored to both the beginning and ending of the string, so extraneous characters are not valid. The sequences of three digits (the area code), three digits (the prefix), and four digits (the suffix) are saved, if found.

2. 
var phoneArray = re.exec(phoneNum);



The exec() method performs the regular expression stored in re on phoneNum. If the pattern we're searching for isn't found (Figure 8.11), phoneArray will be set to null. Otherwise, phoneArray will be an array of the values stored by the regular expression.

Figure 8.11. Here's the result when an invalid number is entered.


3. 
[View full width]
if (phoneArray) {
  document.getElementById ("phoneField").value = "(" + phoneArray[1] + ") " + 
 phoneArray[2] + "-" + phoneArray[3];



If phoneArray is true, the test was successfully passed, and the array has been initialized. So, we reset the form field on the page to the area code inside parentheses and a space, followed by the prefix, a dash, and the suffix, as shown in Figure 8.12.

Figure 8.12. And here's what's displayed when the number is entered correctly.



Previous Page
Next Page