How to validate phone numbers with jQuery

US Valid Phone number formats & Regex

Regex or regular expressions are one of the most popular phone number validation methods. Regular expressions have a long history in UNIX tools and programming languages like C# and JavaScript.

In the simplest terms, regular expressions are a sequence of characters that define a search pattern. You can use Regex to search, edit and manipulate text, as well as perform validation.

The problem with regular expressions is that it can be difficult to verify that an expression behaves as you designed it to, especially if it is complex and/or generated by code. If you're doing something simple like checking for an alphanumeric string or a specific telephone number format, then regular expressions work fine.

However, you're trying to check for something more complex like a sequence of digits followed by a space and then 3 letters followed by another space and 2 digits, then your regular expression will get very complicated and it will be very easy to make a small typo in the Regex or in the code that generates the Regex, which could cause it to match incorrect values.

This can raise its own challenges as you’ll need to use a Regex pattern that can handle many different cases and area codes.

A United States number can take the following forms:

(123) 456 7899
(123).456.7899
(123)-456-7899
123-456-7899
123 456 7899
1234567899

If you need a stricter solution you will need Regex to handle these rules. Here is one such method using a Regex pattern:

/^[\.\- ]{0,}[0-9]{3}[\.\- ]{0,}[0-9]{3}[\.\- ]{0,}[0-9]{4}[\.\- ]{0,}$/‍

This will check if your string is a valid telephone number and matches numbers against each part of the pattern. Let’s look at using a different jQuery approach to telephone number validation.

Validate US phone number using jQuery

In cases like this, where you can write code to perform validation, using jQuery instead of using Regex is often simpler, easier to understand, less likely to contain bugs, and much easier to check against expected inputs and outputs.

jQuery offers an in-built option for validating a US number. In the additional-methods.js file, there are several telephone number validation methods you can use. Open this additional-methods.js file. There is a method called phone_number that takes an element as an argument, This callback function adds the validation we need.

The validator called phoneUS country code is what we need to use in this case. This rule also checks the length, so the additional arguments are redundantly unnecessary.

You can perform validation by adding the following method to your code:


$(document).ready(function() {

  $('#myform').validate({
    rules: {
      phoneNumber: {
        phoneUS: true,
        required: true
      }
    },
    submitHandler: function(form) {
      alert('valid form');
      return false;
    }
  });
});

If the number is valid this code will return true else return false. Add the following code to your file to test our new function. The element phone_number can be used to test your validation.


form id="myform"
  input type="text" name="phone_number" / br/
  input type="submit" /
/form

When you enter a number into the text field that is not a valid phone number, it will return false and you will be shown a message: “Please specify a valid phone number”.

You could also use this jQuery validate plugin. This external plugin can handle number validation elegantly and with little setup or effort required.

Validate international numbers with jQuery

To check international numbers, you can use a similar approach to the one we just covered. You have two options:

Using Regex to validate an international telephone number.
Using in-built jQuery options.

Let’s start with how to validate a UK phone number using jQuery.

UK phone number validation jQuery

Let’s look at what the format is for valid telephone numbers across the United Kingdom. This list was recommended from the official UK government website:

020 7946 0100
020 7946 0866
020 7946 973

These are not real numbers and can be used for testing. Find the full list of these numbers here.

You can use the following Regex pattern to validate a UK number:

^(((\+44\s?\d{4}|$?0\d{4}$?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|$?0\d{3}$?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|$?0\d{2}$?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$‍

Non digits won’t be accepted by this pattern when the pattern match is performed. This Regex will flag any input that does not follow the formatting rules of UK numbers.

You can also use the in-built validator for UK numbers. The only difference is changing phoneUS to phoneUK. Check out the method in the code below:


$(document).ready(function() {

  $('#myform').validate({
    rules: {
      phoneNumber: {
        phoneUK: true,
        required: true
      }
    },
    submitHandler: function(form) {
      alert('valid form');
      return false;
    }
  });
});

Add the following HTML code to your file to test our new method, which will return true if the number is valid. The element phone_number can be used to test your validation.

Don’t stop at just your example, try implementing this element part of a larger project. Let’s look at some of the options available for validating an Australian number.

Australian phone number validation methods

According to the official Australian government website, Australian telephone numbers take the following format:

02 1234 4321 - A landline number in NSW or the ACT
0400 000 000 - A mobile number
1300 975 707 - An Australia-wide landline number
13 00 00 - An alternative Australia-wide landline number
+61 2 1234 4321 - An Australian landline number in international format
+61 400 000 000 - An Australian mobile number in international format

You can use the following Regex pattern to check an Australian number:

/^(?:\+?61|0)[2-478](?:[ -]?[0-9]){8}$/‍

This pattern will match an element against valid Australian numbers. Unlike the phone numbers for the United States and the United Kingdom, there is no in-built validation in jQuery for Australian phone numbers. This pattern will flag any invalid phone number that is entered.

jQuery Validate Phone Number Alternatives

jQuery validation is a popular method thanks to its in-built options and the jQuery validate plugin, but there are many alternatives to using jQuery for telephone number validation. One interesting option is this library offered by Google. You can access phone validation code for more than 200 countries for a number of different programming languages.

Use this library in your code and implement it in a custom method of your own.

API Phone Number Validation

Another excellent option is using an API to perform telephone number validation. The Phone Number Validation and Verification API offered by Abstract comes loaded with features such as:

Fake and invalid number detection,
Carrier and line type identification,
Support for 190 countries,
Compliance with Privacy standards (GDPR, CCPA).

When you implement this API you can improve your contact rate and clean your existing list of contacts making it an excellent option for checking whether an input is a valid phone number. That concludes this guide! If you enjoyed reading this far, check out this other post about How to do IP Geolocation in jQuery.

"How to validate phone numbers with jQuery

Table of Contents:

Heading

Heading

US Valid Phone number formats & Regex

Validate US phone number using jQuery

Validate international numbers with jQuery

UK phone number validation jQuery

Australian phone number validation methods

jQuery Validate Phone Number Alternatives

API Phone Number Validation

Related Articles

Phone Number Python Regex

Phone Number Validation in React Native

Node.js Phone Number Validation

Phone Number Validation in PHP

How to Validate a Phone Number in Javascript (React)

React Phone Number Validation with RegEx