<
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
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| 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.
|
name
attributes of
phone
and
otherPhone
.It also uses the
provided by the International Telephone Input library to format and validate the phone numbers.
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'
,
}
)
,
<
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
>