jQuery validation of NANP Phone numbers

0 votes

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?

Aug 19, 2022 in Web Development by gaurav
• 23,260 points
944 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

Pure JS equivalent of Jquery eq()

To get the element index in the ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,640 points
1,070 views
0 votes
1 answer

$("#select option:second").val() jquery - keep select second value of select box option

Yes, you want the special jQuery eq() selector. ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points
2,354 views
0 votes
1 answer

jQuery get value of select onChange

Try this- $('select').on('change', function() { alert( this.value ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,640 points
407 views
0 votes
1 answer

jQuery get value of select onChange

To get the value and text of ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,640 points
848 views
0 votes
1 answer

jQuery get value of selected radio button

Input Radio value Property Get the value of ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,640 points
2,393 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
234 views
0 votes
0 answers

Email validation using jQuery

How can I use JQuery to validate ...READ MORE

May 21, 2022 in JQuery by Kichu
• 19,050 points
232 views
0 votes
1 answer

Email validation using jQuery

You can use regular old javascript for ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
• 13,670 points
383 views
0 votes
1 answer

Jquery form submit validation

Bind a function to the submit event of the ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,640 points
3,112 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP