Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

telephone number in javaScript

Posted on 2007-04-05
13
Medium Priority
?
1,353 Views
Last Modified: 2012-06-27
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>
0
Comment
Question by:Marylove2007
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 18858622
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.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18918773
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
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18918819
Remember: Always K.I.S.S.
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18918943
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
0
 

Author Comment

by:Marylove2007
ID: 18920539
Thank you all I already wrote this program...No help needed
0
 

Author Comment

by:Marylove2007
ID: 18920548
I am closing this question
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18920590
Please post your solution so that anyone searching for a solution will find yours.
0
 

Author Comment

by:Marylove2007
ID: 18921630
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>
0
 

Author Comment

by:Marylove2007
ID: 18921645
How to Close this question without giving any points. I already wrote th program????
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18921666
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
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18922298
What a nachtmare...
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 19561780
PAQed with points refunded (250)

Computer101
EE Admin
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question