In this tutorial we will show you the solution of phone number validation in JavaScript, on phone number we can apply validation that the phone number given by user is of 10 digits or not.

And next we can apply validation like the phone number must be in required format.

As, we want to say that there are many validations which we can apply on phone number using JavaScript. Let us understand some from them below.

Step By Step Guide On Phone Number Validation In JavaScript :-

Here, in this tutorial we are going to use JavaScript regular expression to validate a phone number.

These expressions are a sequence of characters that forms a search pattern. Let us see the expression pattern for phone number.

• /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/
• Now, before continuing let us understand this expression first.
• /^\(? It means that the number may start with open parenthesis.
• (\d{3}) it means that number must starts with digits and three numeric digits must be entered for valid formats.
• \)? This expression allows us to include a close parenthesis.
• [-]? This expression stands that digits may optionally contains a hyphen that is (-) and it can be placed either after the sequence of three digits or after parenthesis.
• (\d{3}) Again this statements states that the number must contain another three digits.
• [-]? As previous this allows to add a hyphen (-) again after this sequence of three digits.
• (/d{4})$/ At last, this number sequence ends with final four digits. And the number look like (987)-654-3210, 987-654-3210 and 987654-3210

So, this is explanation of regular expression to valid a number in JavaScript. Let us see an example for better understanding

// phone number validation in JavaScript
var regExp = /^\(?(\d{3})\)?(\d{3})[-]?(\d{4})$/;
var number = document.getElementById('inputField').value;
if(!regExp.test(number)){
    alert('Invalid number format.');
}else{
    alert('Valid Number format.');
}

1. As we here see that we today write only JavaScript codes in our example.
2. In previous tutorials, we already many times create a full code example in which we first create an html form with its basic structure. Inside that structure we use html, head, and title, body and script tags.
3. In this example, we have to create a form with method type post and action of any page in which you want user to redirect.
4. Inside that form, we have to create input fields. First one is of type text and second is of type submit. Inside input type text, user have to fill his/her first number and then have to click on submit button to check whether the number given by user is valid or not.
5. We can use our JavaScript function using two ways. In first one we have to direct call the JavaScript function on Form action whereas another way is to use the JavaScript function on button click. Here, there are various ways to call the function.
6. One thing to notice here that the JavaScript code in html is always written inside script tag. As we know script tag is a paired tag and it must have a closing tag. So, we have to use our JavaScript code inside script tag.
7. Now, this expression check that the number entered by user meet with our requirements or not. If not then if will show a message of invalid number format otherwise text with message valid number format will be displayed.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on phone number in JavaScript.

I hope this tutorial on phone number validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.