Strapi-Phone-Validator

Strapi Phone Validator is a powerful and easy-to-use plugin designed to validate phone numbers in various formats. With support for international phone numbers, it offers comprehensive validation to ensure the accuracy of user-provided phone data in your applications.

It's a integration of React International Phone library.

❗ Requirements

• Strapi v4

🔧 Installation

You just need to install the strapi-phone-validator package via npm or yarn, at the root of your strapi project.

npm:

npm i strapi-phone-validator

yarn:

yarn add strapi-phone-validator

✨ Usage

Create a custom field for a phone number on content type builder page.

Now you can use Strapi Phone Validator as a custom field.

You can also validate a phone number also on creating a new entity via API endpoint:

1<code>
2import { factories, Strapi } from "@strapi/strapi";
3import { PhoneNumberUtil } from 'google-libphonenumber';
4
5const phoneUtil = PhoneNumberUtil.getInstance();
6
7const isPhoneValid = (phone: string) => {
8  try {
9    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
10  } catch (error) {
11    return false;
12  }
13};
14
15export default factories.createCoreController(
16  "api::.......",
17  ({ strapi }: { strapi: Strapi }) => ({
18    async create(ctx) {
19      const { data } = ctx.request.body;
20
21     const isValid = isPhoneValid(data.phone);
22
23
24     if(isValid) {
25        //...
26     }
27
28    ...
29    },
30  })
31);
32<code>

To make Strapi Phone Validator work, you should take a look at the next section.

After restarting your Strapi app, Strapi Phone Validator should be listed as one of your plugins.

🚀 Strapi Configuration (required)

Allow Strapi Phone Validator assets to be loaded correctly by customizing the strapi::security middleware inside ./config/middlewares.js.

Instead of:

1export default [
2  // ...
3  'strapi::security',
4  // ...
5];

Write:

1export default [
2  // ...
3    {
4        name: "strapi::security",
5        config: {
6        contentSecurityPolicy: {
7            useDefaults: true,
8            directives: {
9            "connect-src": ["'self'", "https:"],
10            "script-src": ["https://cdnjs.cloudflare.com"],
11            "media-src": ["https://cdnjs.cloudflare.com"],
12            "img-src": ["https://cdnjs.cloudflare.com"],
13            },
14        },
15        },
16    },
17  // ...
18];