Strapi-Phone-Validator

Strapi Phone Validator is an updated and improved version of strapi-phone-validator, now fully compatible with Strapi v5.
It provides seamless integration into the Strapi admin panel with a UI that matches the Strapi design system and includes built-in support for translations.

This plugin allows you to easily validate phone numbers in multiple formats, including full international support, ensuring accuracy and consistency for phone data in your applications.

It integrates the powerful React International Phone library for modern and flexible input handling.

❗ Requirements

• Strapi v5

🔧 Installation

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

npm:

npm i strapi-phone-validator-5

yarn:

yarn add strapi-phone-validator-5

✨ 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.

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];