Post
Ask Question

JavaScript Code For Validating U.S. Format Phone Numbers

Introduction

 
In this article, we shall learn how to do client-side validation of the U.S. format phone numbers using three textbox fields. It means the application will be more responsive because the load on the server is reduced. JavaScript uses the client machine processing power.
 
You can find many solutions on the web but I found that most of these solutions are to validate the phone number from one text box. Here, I’m getting input in three text fields.
 
The following image shows phone number input fields  (eg: 111 222 3333)
 
phone number input fields
Basically, there are two methods to validate phone numbers. The first one is to make the phone number mandatory. The second is to have the phone number not mandatory but if the user enters any one of the three textbox fields, then the validation takes place.
 
Method 2 Validation Conditions
 
Each textbox field should pass the following validation.
  1. The first two fields must consist of the length of three digits and the third field must consist of the length of four digits.
  2. All three fields must have numeric values.
  3. If the user has entered value in one field, other fields shouldn’t be empty.
Before we start, just note
 
Eg: document.form1.area (is just an object), document.form1.area.value (has a value of that area object) 
 
Method 1 - (Phone Number is a mandatory field)
 
To validate this condition is very simple.div> 
  1. If(!document.form1.area || !document.form1.Prefix || !document.form1.Suffix) {  
  2.  Alert(“Phone Number shouldn’ t be empty”);  
  3.  document.form1.area.focus();  
  4.  return false;  
  5. }  div> 
Method 2 (Phone Number not mandatory but validate if the user has entered value at one textbox field)
 
If the user does not enter any value.
  1. If(!document.form1.area || !document.form1.Prefix || !document.form1.Suffix)    
  2. Return true; // return true. Because ph.no is not mandatory here.    div> 
If the user has entered a value in any of the textboxes, then the validation should pass the above three conditions.
 
Condition 1 - Validate Field length’s
 
The first two fields (AreaCode and Prefix) should consist of 3 digits.
  1. If(document.form.area1.value.length != 3) {    
  2.     Alert(“Area code must have 3 digits”);    
  3.     Document.form.area1.focus();    
  4.     Return false    
  5. }    div> 
Likewise, the Prefix field is also validated.
 
For suffix, 
  1. If(document.form.suffix.value.length != 4) {    
  2.     Alert(“Area code must have 4 digits”);    
  3.     Document.form.suffix.focus();    
  4.     Return false;    
  5. }    div> 
Condition 2 - All three fields must have numeric values
 
Note

isNan(is Not-a-Number)- is a bool keyword in JavaScript to check either the object contains alphabets or not. If the value is numeric, then it returns false otherwise if the value has any alphabets, then it returns true.
  1. If(isNaN(document.form.area1)) {    
  2.     Alert(“Area code must have Numeric values”);    
  3.     Document.form.area1.focus();    
  4.     Return false;    
  5. }    div> 
The other two fields are also validated in the same way.
 
Condition 3 - If user has entered a value in one field, the other fields shouldn’t be empty
  1. If(!(document.form.area1.value) || !(document.form.Prefix.value) || !(document.form.Suffix.value)) {    
  2.     If(reBlank.test(document.form.area1.value)) {    
  3.         Alert(“Area1code must not be empty”);    
  4.         document.form.area1.focus();    
  5.         return false;    
  6.     }    
  7.     If(reBlank.test(document.form.Prefix.value)) {    
  8.         Alert(“Prefix code must not be empty”);    
  9.         document.form.Prefix.focus();    
  10.         return false;    
  11.     }    
  12.     If(reBlank.test(document.form.Suffix.value)) {    
  13.         Alert(“Suffix code must not be empty”);    
  14.         document.form.Suffix.focus();    
  15.         return false;    
  16.     }    
  17. }    div> 
If we combine all the above codes together, validation is done in one loop. In some phone numbers, they also include extension number at the end. If the user wants the extension, then we can give one more text field for an extension with the same method of validation.
 
I hope this article is very useful. Thank you.


Similar Articles