Checking for a Pattern
Now we get even fancier. You can use JavaScript to determine if a text value conforms to a predefined pattern such as an email address, a social security number, a date, or an account number. We'll create an example that determines if a value looks like a valid phone number, but you can use a similar approach regardless of the pattern you want to enforce.
Let's define our new function, isAPhoneNumber():
function isAPhoneNumber(entry) {
//don't bother validating the pattern if
//no value was passed in
if (entry) {
//parse the value into small subsections
var openParen = entry.substring(0,1);
var areaCode = entry.substring(1,4);
var closeParen = entry.substring(4,5);
var exchange = entry.substring(5,8);
var dash = entry.substring(8,9);
var line = entry.substring(9,13);
This big chunk of code is easy to understand if you break it down. First, if (entry) checks whether an entry exists. If one does, the code breaks out, or parses, the entry into separate pieces using the JavaScript substring() method.
The substring() method is powerful, but it isn't exactly intuitive. The method returns the portion of a string (the data entered by the user) beginning with the first parameter you give it and ending one digit before the last parameter you give it. And just as in C, JavaScript considers the first digit the 0th element. So, for instance, if your entry reads "(123)456-7890," entry.substring(0,1) returns just the first character, which is "("; entry.substring(1,4) returns "123"; entry.substring(4,5) returns ")"; and so on.
Once we've parsed the data into the proper pieces, we can check them against our pattern:
//now check each of the subsections
//individually
if ((openParen != "(")
|| (!isANumber(areaCode,
"phone number - area code"))
|| (closeParen != ")")
|| (!isANumber(exchange,
"phone number - exchange"))
|| (dash != "-")
|| (!isANumber(line,
"phone number - line"))) {
alert("Please enter phone number
in the following format: (123)456-7890");
}
}
}
The second if statement checks each of the pieces, and if just one piece doesn't conform to what's expected, the whole phone number is deemed invalid. In English, the code above translates to this statement: "if openParen doesn't look like ( or the areaCode isn't numeric or closeParen doesn't look like ) or the exchange portion of the phone number isn't numeric or the hyphen doesn't look like - or the line portion of the phone number isn't numeric, ask the user to reenter the phone number."
By parsing the pattern into different pieces, we can test each piece separately. This tells the user exactly which part of the value caused the problem. Breaking things apart also makes it easier to code: notice that the same isANumber() function is called for each of the numeric pieces of the pattern.
Next: Validating Forms
