Skip to content

Adds a phone number validation check to yup validator using libphonenumber-js

License

Notifications You must be signed in to change notification settings

sanduluca/yup-phone-lite

 
 

Repository files navigation

yup-phone-lite

MIT License npm - yup-phone-lite bundle size - yup-phone-lite bundle size - yup-phone-lite Total NPM Downloads - 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.

yup-phone minzipped size yup-phone-lite minzipped size

Install

npm install --save yup-phone-lite
# or
yarn add yup-phone-lite

Usage

Import the package along with Yup:

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

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

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

API

.phone(countryCode, strict, errorMessage)

countryCode

Type: CountryCode

You can pass a single country code string. 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).

strict

Type: boolean - Default: false

How strictly should it check. Validate phone number strictly in the given region

errorMessage

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

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.

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

Examples

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

// validate any phone number
const phoneSchema = Yup.string().phone().required();

phoneSchema.isValid("(541) 754-3010").then(console.log); // → true

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

// validate phone number for a country
const phoneSchema = Yup.string().phone("IN").required();

phoneSchema.isValid("+919876543210").then(console.log); // → true

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

// validate phone number in the given region with custom error message
// NOTE: in order to pass a custom error message you must include the country code as the first argument
const phoneSchema = Yup.string()
  .phone("IN", true, "${path} is invalid")
  .required();

try {
  phoneSchema.validateSync("+1-541-754-3010");
} catch (error) {
  console.log(error.message); // → this is invalid
}

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.
$ npm run build # Build for production
$ npm test # Run tests
$ npm publish # Publish npm package (prompts for version)

License

MIT

About

Adds a phone number validation check to yup validator using libphonenumber-js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 88.9%
  • JavaScript 10.3%
  • Shell 0.8%