5 Ways to Validate Phone Numbers in JavaScript

Ensuring data quality in web applications often starts with phone number validation. This guide explores four ways to validate phone numbers in JavaScript, providing working code for each method. We'll also cover the pitfalls of traditional approaches and demonstrate how Abstract API overcomes these challenges.

How to Implement Phone Number Validation in JavaScript

This section details three distinct methods for JavaScript phone number validation. Each approach has a unique implementation, from simple pattern checks to comprehensive library-based solutions.

Regex-Only Check

Regular expressions, or regex, offer a direct way to validate phone number syntax. This method uses a pattern to check if a string conforms to a specific format and requires no external dependencies.

For example, the E.164 standard, which covers a plus sign followed by up to 15 digits, can be validated with a simple pattern. A similar approach works for country-specific formats like the US. The code defines functions that test a string against these patterns.

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

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

Google’s Libphonenumber-js

For more advanced validation, you can use Google’s "libphonenumber-js" library. This package includes Google's metadata and understands the national numbering plans for over 200 regions worldwide.

The library can differentiate between a "possible" number and a fully "valid" one. It also normalizes numbers to the E.164 format and provides helper functions. The NPM package comes in different bundle sizes. The code imports a function to parse a string, checks its validity, and formats it.

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

Native HTML5 Input

HTML5 provides built-in features for form validation with the “input type="tel"” element. This approach leverages the browser's native capabilities to check phone numbers without a separate JavaScript library.

On mobile devices, the browser displays a specialized telephone keypad. You can specify a regex in the “pattern” attribute to enforce a specific format for form validation. The JavaScript code uses the Constraint Validation API to listen for the form’s “submit” event. If the input is invalid, it prevents submission and can display a custom validation 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 Phone Number Validation

While the methods above offer basic checks, they share fundamental limitations. These approaches often fail to account for the complex and dynamic nature of global and domestic telephone numbering plans.

• International number plans present a major hurdle. A simple regex check struggles with varied lengths, overlapping country and area codes, and unique national dial quirks, which leads to frequent validation errors.
• Libraries like libphonenumber-js depend 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 correct format does not guarantee a number is active. Static validation with regex or libraries cannot detect disconnected lines, temporary numbers, or ported numbers, so it only confirms syntax, not reachability.
• User input is often inconsistent. People enter numbers with extra characters, vanity words, or ambiguous prefixes. This forces parsers in HTML5 or regex-based solutions to guess, which creates brittle logic.