InternationalTelephoneInput plugin

Integrate with the International Telephone Input

Usage

This plugin allows you to integrate the input with the International Telephone Input. It is the popular JavaScript library that provides a friendly way to enter and validate international telephone numbers.

The following piece of code is the starting point to use the InternationalTelephoneInput plugin:

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.css" />
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="demoForm" method="POST">...</form>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-international-telephone-input/index.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function(e) {
                FormValidation.formValidation(
                    document.getElementById('demoForm'),
                    {
                        fields: {
                            ...
                        },
                        plugins: {
                            internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
                                autoPlaceholder: '...',
                                field: '...',
                                message: '...',
                                utilsScript: '...',
                            }),
                            ...
                        },
                    }
                );
            });
        </script>
    </body>
</html>

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

The plugin provides the following options:

(* denotes a required option)

Option	Type	Description
`autoPlaceholder`	`string`	It's the same option as `autoPlaceholder` provided by International Telephone Input. It will be used as an example number for the currently selected country, and will be updated when the country changes. The option is `polite` by default.
`field`*	`string` or `string[]`	The field name that will use the International Telephone Input. Multiple fields are separated by commas.
`hiddenPhoneInput`	`string`	Add a hidden input that serves the same functionality as the hiddenInput option provided by intl-tel-input
`message`*	`string`	The error message
`utilsScript`	`string`	It's the same option as `utilsScript` provided by International Telephone Input. The option indicates the path to the script of formatting and validating the phone number. It's empty by default.

hiddenPhoneInput option

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
                ...
                hiddenPhoneInput: 'fullPhoneNumber',
            }),
            ...
        },
    }
);

The plugin will add a hidden input named fullPhoneNumber to the form. If the corresponding input is valid, then the hidden input has the value of the full phone number. Otherwise, its value is set to empty.

APIs

The plugin provides the following method:

Method	Description
`getIntTelInstance(field: string)`	Get the instance of `intl-tel-input` attached to the given field

// Create a FormValidation instance
const fv = FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
            field: 'phone',
        }),
    },
});

// Get the InternationalTelephoneInput plugin instance
const internationalTelInputPlugin = fv.getPlugin('internationalTelephoneInput');

// Call the API
const intlTelInstance = internationalTelInputPlugin.getIntTelInstance('phone');

Then you can call the APIs provided by the intl-tel-input library. The following piece of code invokes the getNumber function to get the phone number including the country code:

const phoneNumber = intlTelInstance.getNumber();

Using the npm packages

If you are using a bundler such as Webpack, Rollup, Parcel or Vite, etc., to bundle your application, then it's recommended to use the FormValidation NPM packages.

Install the packages:

$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-international-telephone-input

Import and use the InternationalTelephoneInput plugin:

import { formValidation } from '@form-validation/bundle/popular';
import { InternationalTelephoneInput } from '@form-validation/plugin-international-telephone-input';

formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            internationalTelephoneInput: new InternationalTelephoneInput({
                ...
            }),
            ...
        },
    }
);

Basic example

The following example attaches the International Telephone Input to multiple phone inputs which have the name attributes of phone and otherPhone. It also uses the utils script provided by the International Telephone Input library to format and validate the phone numbers.

The options are declared as following:

internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
    field: 'phone,otherPhone',
    message: 'The phone number is not valid',
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js',
}),

InternationalTelephoneInput plugin

Declarative example

The example below takes the advantage of the Declarative plugin to declare all options in the HTML attributes.

<form
    data-fvp-international-telephone-input="true"
    data-fvp-international-telephone-input___class="FormValidation.plugins.InternationalTelephoneInput"
    data-fvp-international-telephone-input___field="phone,otherPhone"
    data-fvp-international-telephone-input___message="The phone number is not valid"
    data-fvp-international-telephone-input___utils-script="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
>
    ...
</form>

<script>
    document.addEventListener('DOMContentLoaded', function (e) {
        const form = document.getElementById('demoForm');
        const fv = FormValidation.formValidation(form, {
            fields: {
                // ...
            },
            plugins: {
                declarative: new FormValidation.plugins.Declarative(),
            },
        });
    });
</script>

Declarative mode

Changelog

v2.4.0

The plugin can be enabled or disabled using the enablePlugin and disablePlugin methods

v2.3.0

The hiddenPhoneInput option supports multiple fields

v2.2.0

Add the new hiddenPhoneInput option

v2.0.0

Add the npm package

v1.10.0

Add new getIntTelInstance(...) function to get the instance of intl-tel-input

Icon plugin J plugin

InternationalTelephoneInput plugin

Usage

APIs

Using the npm packages

Basic example

Declarative example

See also

Changelog