Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to validate a US Phone Number on the fly

Validation

How to validate a US Phone Number on the fly

by  EdwardMartinIII  Posted    (Edited  )
U.S. Phone numbers are generally ten digits. However, people format 'em all kinds of different ways (xxx-xxx-xxxx, (xxx) xxx-xxxx, xxx.xxx.xxxx, etc.) and there's nothing more annoying than to try and guess how the Programmer wanted the number formatted. Likewise, there's no reason to insist that the User format a number a certain way.

Ideally, the User shouldn't have to worry about formatting -- the software should do it for them, throwing up an error only if there's some problem.

With that in mind, this sample takes an input string, strips everything out except digits, throws an error up if the count <> 10, and formats a 10-count number according to the following standard: (xxx) xxx-xxxx. Obviously, you can modify the js code to format it however you wish. The idea here is that this is one part of the validation sequence for a data entry page. Eventually, there is a confirmation page and, like most people, we won't care how the number is formatted, just that all the digits are there.

This is the HTML, which I saved as
Code:
Sample.html
:

Code:
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    <title>JavaScript Sample</title>
    <script src="Sample.js" type="text/javascript"></script>
  </head>
  <body>
    <form name="CustomerData">
      <input type="text" id="PhoneNumber"></input><input type="button" value="Parse this US number" onclick="CustomerData.PhoneNumber.value=ParseUSNumber(CustomerData.PhoneNumber.value)"></input>
    </form>
  </body>
</html>

and this is the external js file, which I saved as
Code:
Sample.js
and stored in the same directory:

Code:
function ParseUSNumber(PhoneNumberInitialString)
  {
    var FmtStr="";
    var index = 0;
    var LimitCheck;

    LimitCheck = PhoneNumberInitialString.length;
    while (index != LimitCheck)
      {
        if (isNaN(parseInt(PhoneNumberInitialString.charAt(index))))
          { }
        else
          { FmtStr = FmtStr + PhoneNumberInitialString.charAt(index); }
        index = index + 1;
      }
    if (FmtStr.length == 10)
      {
        FmtStr = "(" + FmtStr.substring(0,3) + ") " + FmtStr.substring(3,6) + "-" + FmtStr.substring(6,10);
      }
    else
      {
        FmtStr=PhoneNumberInitialString;
        alert("United States phone numbers must have exactly ten digits.");
      }
    return FmtStr;
  }

There is no facility for entering extensions, but seeing as how extensions can be basically anything, if you want extensions, you might consider dropping validation altogether and just collect the string as entered by the User.

Another weakness of which you should be aware is that it'll successfully parse anything that happens to have ten digits, from "(555) 555-1212" to "Billy ate the heads off 55 bats, 12 dogs, 4 gerbils and a 9-headed cow before breaking legs 1, 2 and 3 of its 4 legs." So, if your Users are inclined to insert such data, you might be aware of the possibility...
[lickface][bat][puppy][bear][cow][lickface]

Validation for International numbers depends, of course, on the country in question.

It is my hope that this bit of validation code prove useful to you.

Cheers,

Edward Martin III
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top