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/formvalidation/dist/css/formValidation.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/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendors/formvalidation/dist/js/plugins/InternationalTelephoneInput.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. |
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. |
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>
See also