JavaScript Code For Validating U.S. Format Phone Numbers

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 the 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)

Basically, there are two methods to validate the phone numbers. First one is to make the phone number mandatory. The second is to have the phone number not mandatory but if the user enters in 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. 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 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 value of that area object) 

Method 1 - (Phone Number is a mandatory field)

To validate this condition is very simple.

If(!document.form1.area || !document.form1.Prefix || !document.form1.Suffix) {
    Alert(“Phone Number shouldn’ t be empty”);
    document.form1.area.focus();
    return false;
}

Method 2 (Phone Number not mandatory but validate if user has entered value at one textbox field)

If user does not enter any value.

If(!document.form1.area || !document.form1.Prefix || !document.form1.Suffix)
Return true; // return true. Because ph.no is not mandatory here.

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

First two fields (AreaCode and Prefix) should consist of 3 digits.

If(document.form.area1.value.length != 3) {
    Alert(“Area code must have 3 digits”);
    Document.form.area1.focus();
    Return false
}

Likewise, Prefix field is also validated.

For suffix, 

If(document.form.suffix.value.length != 4) {
    Alert(“Area code must have 4 digits”);
    Document.form.suffix.focus();
    Return false;
}

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.

If(isNaN(document.form.area1)) {
    Alert(“Area code must have Numeric values”);
    Document.form.area1.focus();
    Return false;
}

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

If(!(document.form.area1.value) || !(document.form.Prefix.value) || !(document.form.Suffix.value)) {
    If(reBlank.test(document.form.area1.value)) {
        Alert(“Area1code must not be empty”);
        document.form.area1.focus();
        return false;
    }
    If(reBlank.test(document.form.Prefix.value)) {
        Alert(“Prefix code must not be empty”);
        document.form.Prefix.focus();
        return false;
    }
    If(reBlank.test(document.form.Suffix.value)) {
        Alert(“Suffix code must not be empty”);
        document.form.Suffix.focus();
        return false;
    }
}

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 extension with the same method of validation.

I hope this article is very useful. Thank you.