View Full Version : Require input of telephone # in a certain format?

03-01-2003, 03:38 AM
I have field for the user to input a telephone number and include an example '(xxx) xxx-xxxx' however, I think I can do this a better way.

It easy to have ( appear in the textfield, but I'm not sure how to have ) display after the user inputs three digits. Any suggestions?

I don't want to place ( ) in the field by default, I don't want the user to have to backspace to enter the area code.

Thanks for your help.

03-01-2003, 03:46 AM
Use two textboxes.

Philip M
03-01-2003, 09:11 AM
If you require a telephone number to be entered in a certain (US) format you are cutting yourself off from users outside the USA, where phone numbers often have a different format.

Surely the user can simply enter their phone number? Even if it is forced to a certain format it can still be wrong.

03-01-2003, 10:44 AM
I know this question is in the Javascript forum...but this can be easily solved using a server side language...like PHP.

Actually, I was looking to do the same thing 2 days ago...I needed to make sure the user entered a valid US phone number.

I use mostly regular expressions to determine if the input is correct or not. You can find a lot of them at http://www.regxlib.com.


03-01-2003, 05:06 PM
If a regular expression is what is needed they can esaily be donein javascript to. Seems a bit of a waster to go to the server just for that.


03-02-2003, 04:00 PM
OK, so let me give you some clues.

You don't need PHP nor Anything server side for that.

your desired format is:
(xxx) xxx-xxxx'

That's alright a string.
So just use the ancient methode charAt(index) to check
if there are the brackets you want, if after folows a space, if after
the first 3 letters you have a dash and if after the dash comes a group of four letters and no more.

Such like:

var no = document.forms[1].elements[1];

that assumes you have a <form> whose first <input>
element is a text one.

in your example, there are 14 digits.

if (no.length!=14) alert('No USA phone number format!')

and you can go on:

if (no.charAt(0) != '(' || no.charAt(4)!=')' || no.charAt(5)!=' ' || no.charAt(9)!='-') alert('No USA phone number format!')

That's all. In the same manner you can check also if digits are in the appropiate range (i.e. first digit must be 0, or smaller than 9 or something - I dont't know how the phone numbers in the USA are)


03-02-2003, 04:38 PM
Personally, I would recommend that you don't require them to type their phone number like that...I generally has the ability to annoy people and turn them away.

Instead, I would recommend that you just ask for a numerical phone number. Then, when they click submit, use javascript to strip out all characters other than numbers (so you're left with just the number), and then verify it:

1. If the first character is "1" (if they specify the country code)...remove it.
2. The length should now be 10...if it's not, then the phone number is invalid - use an alert("Please fix phone number") message or something.

If the phone number is correct, change the phone number on the form to the desired format...and submit it.

It's an extra step...but in terms of web usability...it's worth it.


03-13-2003, 05:42 PM
Something like this (http://youngpup.net/?request=/snippets/client-validation.xml) would be much better.

03-13-2003, 09:33 PM
Visit the "Samples of my work > Order Form" page at my site, drop down to the "Telephone" field, type whatever you want in whatever format you like, tab to the next field, and then look back at the resulting telephone number. Any one of thirty-four different "standard" formats may be chosen for the result. If you like what you see, please write to me directly at jalarie@umich.edu to ask for the free phonfmt1.js file; it's too large to post here. If you feel that there's a shortcoming, please let me know and I'll try to improve it. My site address is: