jQuery validation of NANP Phone numbers

Question

I'm trying to validate my form. In my form is a phone number field. The user inserts a phone number and validation takes place as well as formatting. I've read a lot of the other similar questions in StackOverflow and through searches elsewhere, but I'm stuck. The form keeps saying that a valid number I insert is invalid.

I'm only concerned with NANP numbers and I understand the NANP numbers are formatted like this: NXX-NXX-XXXX, where N can only be digits [2-9], and X can be [0-9]. I don't need a country code.

Here's my code:

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    var regex1 = /^(\()?[2-9]{1}\d{2}(\))?(-|\s)?[2-9]{1}\d{2}(-|\s)\d{4}$/;

    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');        
    if(!regex1.test(phone)){
        hasError = true;
        $this.css('background-color','#FFEDEF');
    }   
    else{
        area = phone.substring(0,3);
        prefix = phone.substring(3,6);
        line = phone.substring(6);
        $this.val('(' + area + ') ' + prefix + '-' + line);
        $this.css('background-color','#FFFFFF');    
    }

The idea is that no matter whether I insert 8012559553, (801)2559553, (801)255-9553, 801-255-9553 or something similar that it would be validated and formatted like this: (801) 255-9553. But again, the form for some reason continues to say that any number I insert is invalid, regardless of whether it's valid or not. This is code that I was using that was working, but didn't comply with NANP formats:

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');        
    if(phone.length != 10){
            hasError = true;
            $this.css('background-color','#FFEDEF');
    }   
    else{
            area = phone.substring(0,3);
            prefix = phone.substring(3,6);
            line = phone.substring(6);
            $this.val('(' + area + ') ' + prefix + '-' + line);
            $this.css('background-color','#FFFFFF');    
    }

So, I'm having trouble implementing the regex test of the numbers to make sure that the numbers are real and then have the number formatted correctly... Any ideas?

Answer 1

The problem with your code is that regex1 is looking for special characters in the phone string. The code fails because you are stripping all special characters from the phone string in the line phone = phone.replace(/[^0-9]/g,'');, and thus when you do your test against regex1 you are looking for values that you already removed.

By all means, your approach is fine. Often I find it easier to use two simple REGEXs instead of trying to fit everything into one catch-all REGEX. Once you modify regex1 to only do a NANP validity check on a 10 digit number with no special characters, your code will work fine.

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    var regex1 = /^([2-9]{1}\d{2})([2-9]{1}\d{2})\d{4}$/;

    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');        
    if(!regex1.test(phone)){
        hasError = true;
        $this.css('background-color','#FFEDEF');
    }   
    else{
        area = phone.substring(0,3);
        prefix = phone.substring(3,6);
        line = phone.substring(6);
        $this.val('(' + area + ') ' + prefix + '-' + line);
        $this.css('background-color','#FFFFFF');    
    }

Answer 2

Here is my not very strict but yet nice RegExp:

/^\D*([2-9]\d{2}\D*){2}(\d{2}\D*){2}\D*$/

It accepts:

• (235)-546-42-09
• 452-845-12-12
• [933]-323-34-53
• 222-435-0903
• 222-4350903
• 2224350903
• ( 222 ) -- 785 -- 12 -- 76

It doesn't accepts:

• 111-342-45-45
• 234-111-50-78
• 222-222-222-2 (you may simply modify RegExp to remove this)