yup-phone-lite

Adds a phone number validation check to yup validator using libphonenumber-js which gives accurate validation checks.
Read more about the core library here libphonenumber.

This package is a fork of yup-phone made by abhisekp. It replaces google-libphonenumber with the much smaller port libphonenumber-js with the intention of drastically reducing the bundle size.

One difference between this and the original package is that there is no strict option for checking a phone number's country, it will always validate against the country code you pass in (or US by default). This is because there is no "lenient" option for libphonenumber-js like there is with google-libphonenumber. The only other difference is that a few phone numbers will slip through the cracks and give false positives (at least according to the tests written for the original package). If either of those is an issue for you, go ahead and use the original package!

Install

1npm install --save yup-phone-lite
2# or
3yarn add yup-phone-lite

Usage

Import the package along with Yup:

1import * as Yup from "yup";
2// const Yup = require("yup");
3import "yup-phone-lite";
4// require("yup-phone-lite");

Then create a schema like you normally would with yup except using the .phone() function:

1Yup.string()
2  .phone("US", "Please enter a valid phone number")
3  .required("A phone number is required");

API

1.phone(countryCode, errorMessage)

countryCode

Type: CountryCode | CountryCode[] — Default: "US"

You can pass either a single country code string, or an array of country codes. This field mirrors the country code argument for libphonenumber-js. Here is their definition of a country code:

A "country code" is a two-letter ISO country code (like US).

This library supports all officially assigned ISO alpha-2 country codes, plus a few extra ones like: AC (Ascension Island), TA (Tristan da Cunha), XK (Kosovo).

errorMessage

Type: string — Default: "${path} must be a valid phone number for region ${countryCode}"

This field is the error message returned by yup when the validation fails. Here is the yup documentation explaining it:

For the message argument you can provide a string which will interpolate certain values if specified using the ${param} syntax. By default all test messages are passed a path value which is valuable in nested schemas.

In order to use the params provided by yup, you must pass the errorMessage in a normal string made with either ', or " characters. If you try and form your string with a tick (`) character, you'll get an error because of the variable not being defined.

Here are the yup params you can use in your string:

• path: the string path of the current validation (in a basic validation it will be the string "this", in an object validation, it will be the name of the object key)
• originalValue: the original value that is being tested

NOTE: While the default error message includes the countryCode in it's template string, you can not pass it in the same way you include the yup interpolated values, you will have to include the code in the message itself.

1// e.g.
2.phone("US", "${path} must be a valid phone number for region US");

Examples

1import * as Yup from "yup";
2// const Yup = require("yup");
3import "yup-phone-lite";
4// require("yup-phone-lite");
5
6// validate any phone number (defaults to "US" for country)
7const phoneSchema = Yup.string().phone().required();
8
9phoneSchema.isValid("(541) 754-3010").then(console.log); // → true

---

1import * as Yup from "yup";
2// const Yup = require("yup");
3import "yup-phone-lite";
4// require("yup-phone-lite");
5
6// validate phone number for a country other than the US
7const phoneSchema = Yup.string().phone("IN").required();
8
9phoneSchema.isValid("+919876543210").then(console.log); // → true

---

1import * as Yup from "yup";
2// const Yup = require("yup");
3import "yup-phone-lite";
4// require("yup-phone-lite");
5
6// validate phone number in the given region with custom error message
7// NOTE: in order to pass a custom error message you must include the country code as the first argument, even if using the default "US"
8const phoneSchema = Yup.string().phone("IN", "${path} is invalid").required();
9
10try {
11  phoneSchema.validateSync("+1-541-754-3010");
12} catch (error) {
13  console.log(error.message); // → this is invalid
14}

For more examples, check yup-phone-lite.test.ts file.

Contributing

• Files are minified using closure compiler.
• Uses jest for testing.
• Generates CJS, UMD, and ESM builds.
• Use npm version major|minor|patch to version.
• Use eslint and prettier for code formatting.
• Uses semantic release for version.

1$ npm run build # Build for production
2$ npm test # Run tests
3$ npm publish # Publish npm package (prompts for version)

License

MIT