telephone number in javaScript

Marylove2007
Marylove2007 used Ask the Experts™
on
I am trying to Write a script that inputs a telephone number as a string in the form (555) 555-5555. The script should use String methods to validate and parse the input. Display the validated area code and the seven-digit phone number in output fields. If the input is invalid display an error message.

here is my code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

      <head>
            <title>Field Validation</title>
</head>
      <body>
<h1> Field Validation</h1>
<div class="content">
<form name="phoneNumber" id="phoneNumber">
<table border = "2" class="matrix" cellpadding="0" cellspacing="0">
<tr>
      <td>Enter Phone number<br>[in the form(555)555-5555]</td>
      <th><input type="text" name="phone" id="phone" value="(555) 555-5555" size="14" maxlength="14" /></th>
</tr>
<tr>
      <td colspan="2"><input type="button" value="Validate" onclick="extractNumber()" /></td>
</tr>
<tr>
      <td>Area Code: </td>
      <td><input type="text" name="area" id="area" size="5" readonly="readonly" /></td>
</tr>
<tr>
      <td>Number: </td>
      <td><input type="text" name="telephone" id="telephone" size="8" readonly="readonly" /></td>
</tr>
</table>
</form>
</div>
<br />

      </body>

</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
Why make the Poor User conform to your expectations of a "correct" phone number?

First, I would strip out all characters that are not digits 0 through 9. Then check the length of the string. if it is 7, then there is no area code; if it is 10, then there is an area code. Either way, it becomes trivial to format the phone number - for display only, not for storage - after that.

Commented:
You can do that with match().  Use a regular expression and code like the following.

<input type="text" name="phone" id="phone" value="(555) 555-5555" size="14" maxlength="14" onblur="if (!this.value.match(/^\(\d{3}\) \d{3}-\d{4}$/)) { alert('Please enter a valid phone number using the correct format.'); this.value=''; this.focus; return false;" />

I do agree that it is better to be a little flexible and make it so your script can format it.  Also, with the script as it is now, the default value in the input will pass.  If you don't want to allow that then you will need to change the script a bit.  Let me know if you need help with that.

The script above will at least get you started and shows you how to do it.  Let me know if you have a question or need more information.

bol
Top Expert 2007

Commented:
Remember: Always K.I.S.S.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Marylove2007,

Let me know if you would like a script that will allow for the number to be input in different formats.  The script (at the end) can provide a result that fits the format you need but is just more flexible.  It does involve more scripting so if the format you want isn't a problem for the user to input then what you ask would make sense and be the easiest.

I can provide an example of the other method though if you need it.

bol

Author

Commented:
Thank you all I already wrote this program...No help needed

Author

Commented:
I am closing this question
Top Expert 2007

Commented:
Please post your solution so that anyone searching for a solution will find yours.

Author

Commented:
Here  You Go

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

      <head>
            <title>Field Validation</title>
            
<script type="text/javascript">
<!--
function extractNumber() {
var number,
      areaCode,
      phoneNo;

number = document.phoneNumber.phone.value;

if (number.charAt(0) != "(" || number.charAt(4) != ")" || number.charAt(5) != " " || number.charAt(9) != "-") {
      showError();
      return;
      }


  if (number.charAt(1) < 2 || number.charAt(6) < 2) {
      alert("That is not a valid phone number.");
      document.phoneNumber.phone.value = "Invalid Number.";
      return;
      }


  for (countArea = 1; countArea < 4; countArea++) {
      if (isNaN(number.charAt(countArea))) {
      showError();
      return;
      }  
}


for (countExchange = 6; countExchange < 8; countExchange ++) {
      if (isNaN(number.charAt(countExchange))) {
      showError();
      return;
      }
}


for (countStation = 10; countStation < 13; countStation ++) {
      if (isNaN(number.charAt(countStation))) {
      showError();
      return;
      }
}


areaCode = number.split(" ");

document.phoneNumber.area.value = (areaCode[0]);

phoneNo= areaCode[1].split("-");

document.phoneNumber.telephone.value = phoneNo.join("-");
};



function showError () {
      alert("The phone number should in the format:\n\(555\) 555-5555 \n Please try again!");
      document.phoneNumber.phone.value = "Invalid Number.";
}
-->
</script>
      </head>
      <body>

<div class="content">
<form name="phoneNumber" id="phoneNumber">
<table border = "2" class="matrix" cellpadding="0" cellspacing="0">
<tr>
      <td>Enter Phone number<br>[in the form(555)555-5555]</td>
      <th><input type="text" name="phone" id="phone" value="(xxx) xxx-xxxx" size="14" maxlength="14" /></th>
</tr>
<tr>
      <td colspan="2"><input type="button" value="Validate" onclick="extractNumber()" /></td>
</tr>
<tr>
      <td>Area Code: </td>
      <td><input type="text" name="area" id="area" size="5" readonly="readonly" /></td>
</tr>
<tr>
      <td>Number: </td>
      <td><input type="text" name="telephone" id="telephone" size="8" readonly="readonly" /></td>
</tr>
</table>
</form>
</div>
<br />

      </body>

</html>

Author

Commented:
How to Close this question without giving any points. I already wrote th program????

Commented:
You post a message in General Community Support (no points needed).  Put the URL of this question in the message body and let them know you answered it yourself.  The moderators will respond and help you.  Let me know if you have a problem or need help with this.

Just out of curiosity did you try my suggestion?  It does in a few steps what your function does.  I'm glad to see you changed the default value you use.

bol
Top Expert 2007

Commented:
What a nachtmare...
PAQed with points refunded (250)

Computer101
EE Admin

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial