5 Ways to Implement Phone Number Validation in Yup

Validating phone numbers in Yup is key for clean user data. We'll explore five ways to implement this, complete with code snippets. You'll see the pitfalls of common client-side methods and how Abstract API offers a more reliable approach for robust, server-backed validation without the usual drawbacks.

How to Implement Phone Number Validation in Yup

Here are four common methods to validate phone numbers with Yup. Each approach has a different implementation, from simple regular expressions to more complex, context-aware rules for dynamic forms.

Regex with the .matches Method

This method uses a single regular expression with Yup’s built-in “.matches” function. It is a direct way to check a phone number’s format, and the validation runs synchronously without extra dependencies.

The pattern should align with the E.164 standard to avoid country-specific rules. The code defines a schema where a phone number is a required string. The “.matches” function then tests the input against a regex pattern that checks for an optional plus sign followed by 9 to 14 digits.

import * as Yup from 'yup';

const phoneSchema = Yup.string()
  .required('phone required')
  .matches(/^\+?[1-9]\d{9,14}$/, 'invalid phone');

A Custom .test with libphonenumber-js

This approach uses the “libphonenumber-js” library, which contains the same metadata Google uses. You can delegate complex validation logic to this library through Yup’s custom “.test” function.

This method avoids regex drift and handles national versus international formats. The code imports the “isValidPhoneNumber” function and creates a Yup string schema. A custom test named “is-valid-e164” then uses this function to validate the number.

import { isValidPhoneNumber } from 'libphonenumber-js';
import * as Yup from 'yup';

const phoneSchema = Yup.string().test(
  'is-valid-e164',
  'invalid phone',
  value => isValidPhoneNumber(value || '')
);

An External addMethod Plugin

Packages like yup-phone extend Yup’s functionality by adding a “.phone()” method. There is also a yup-phone-lite version. These packages use Yup’s “addMethod” feature to create a more readable schema.

They offer features like strict and loose validation modes and can automatically default to a specific country. The code shows how to import the plugin and use it with different configurations, such as a country-specific check or a custom error message.

import * as Yup from 'yup';
import 'yup-phone';           // or 'yup-phone-lite'

const usSchema    = Yup.string().phone().required();          // defaults to US
const inStrict    = Yup.string().phone('IN', true).required();
const customError = Yup.string().phone('US', false, '${path} bad').required();

Context-Aware .when Rules

Yup’s “.when” conditional validation allows you to link the phone number rule to another field, like a country selector. This enables you to change validation patterns or plugins dynamically based on user input.

This approach is useful for applications that support multiple regions within a single code bundle. The code creates a schema where the phone validation rule changes based on the selected country. If the country is “US,” it uses a specific regex, otherwise, it falls back to a different validation test.

const schema = Yup.object({
  country: Yup.string().required(),
  phone:   Yup.string().when('country', {
    is:  'US',
    then: Yup.string().matches(/^\+1\d{10}$/, 'US phone invalid'),
    otherwise: Yup.string().test(
      'intl',
      'intl phone invalid',
      v => isValidPhoneNumber(v || '')
    )
  })
});

Challenges of Phone Number Validation in Yup

These client-side methods seem convenient but introduce significant reliability and security risks. The validation logic often contains subtle flaws that compromise data quality and expose applications to potential fraud.

• Numbering plans change often. Methods like yup-phone or a custom test with libphonenumber-js rely on bundled metadata. If this data is outdated, the validation fails for real numbers and allows fake ones.
• The yup-phone plugin conflicts with Yup's nullable contract. It flags empty values as errors, which forces developers to add extra .when or .test logic. This workaround increases maintenance and introduces hidden edge cases.
• These methods only perform syntactic checks. A library like libphonenumber-js cannot confirm if a number is active or reachable. A correctly formatted number might still be fake, which prevents guaranteed SMS delivery.
• All these validation methods run on the client side. A user can disable JavaScript or modify the schema to bypass checks. Without server-side duplication, your API might accept unvalidated data, which opens fraud vectors.