5 Ways to Validate Phone Numbers in JavaScript

Validating phone numbers is a critical step for maintaining data integrity in web forms and applications. We'll walk through five JavaScript implementation methods with code examples, explore the shortcomings of these traditional techniques, and demonstrate how Abstract API provides a more reliable alternative.

How to Validate Phone Numbers in JavaScript

There are several ways to implement phone number validation in JavaScript. Each method offers a different approach to check if a phone number's format is correct before processing it.

Regular Expression Checks

A regular expression, or regex, provides a direct way to check a string against a specific pattern. You can define a pattern for the international E.164 standard or for a specific country's format.

The E.164 pattern checks for an optional plus symbol followed by one to 15 digits. The US-specific example first removes all non-digit characters and then checks for a 10-digit number, with an optional leading '1'. This method only validates syntax.

const E164 = /^\+?[1-9]\d{1,14}$/;
function isE164(str) {
  return E164.test(str);
}

const US = /^(1)?\d{10}$/;
function isUS(str) {
  return US.test(str.replace(/\D/g, ''));
}

Google’s libphonenumber-js Library

This popular library from Google uses its own metadata to parse and validate numbers. It understands national numbering plans for more than 200 regions and can distinguish between a "possible" number and a "valid" one.

The library also normalizes numbers to the E.164 format and provides helper functions. The minified bundle is around 75 kB, while the full version is 140 kB. The code below parses a string and checks if it is a valid number.

import {parsePhoneNumberFromString} from 'libphonenumber-js/min';
const phone = parsePhoneNumberFromString('+1 213 373 4253', 'US');
if (phone && phone.isValid()) {
  console.log(phone.formatInternational());
}

Native HTML5 Validation

The HTML5 input type 'tel' signals to mobile browsers that they should display a telephone keypad. You can add a regex to the pattern attribute for format validation during form submission.

The Constraint Validation API works with the form. The checkValidity method checks the input against the pattern. If the check fails, you can use setCustomValidity to display a custom error message.

<form id="f">
  <input type="tel"
         id="p"
         name="p"
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
         required>
</form>

document.getElementById('f').addEventListener('submit', e => {
  const inp = document.getElementById('p');
  if (!inp.checkValidity()) {
    inp.setCustomValidity('Use ###-###-####');
    e.preventDefault();
  }
});

Challenges of JavaScript Phone Number Validation

Traditional JavaScript methods introduce practical challenges that compromise data quality. Each approach has inherent limitations that developers must consider before implementation.

• International numbering plans are complex. Country codes overlap with area codes, and number lengths vary widely. A single regular expression check often fails to account for these national quirks, which leads to incorrect validation results.
• Libraries like libphonenumber-js rely on static metadata. Since numbering plans change faster than library updates, the validation for new or migrated phone number ranges can become inaccurate and produce false results.
• A syntactically correct number does not guarantee it is active. Static methods like regex checks or libphonenumber-js cannot confirm if a line exists due to factors like number porting, churn, or carrier blocks.
• User input is often inconsistent. People enter vanity words, stray characters, or omit prefixes. Simple parsers in HTML5 validation or regex must guess the user's intent, which can lead to hard-to-trace bugs.