| Name | HTML attribute | Type | Description |
|---|---|---|---|
country
*
|
data-fv-zip-code___country
|
String
or
Function
|
An ISO-3166 country code |
message
|
data-fv-zip-code___message
|
String
|
The error message |
| Country | Country code |
|---|---|
| United States | US |
| Austria | AT |
| Bulgaria | BG |
| Brazil | BR |
| Canada | CA |
| Czech Republic | CZ |
| Denmark | DK |
| France | FR |
| Germany | DE |
| India | IN |
| Italy | IT |
| Ireland | IE |
| Morocco | MA |
| Netherlands | NL |
| Poland | PL |
| Portugal | PT |
| Romania | RO |
| Russia | RU |
| Singapore | SG |
| Slovakia | SK |
| Spain | ES |
| Sweden | SE |
| Switzerland | CH |
| United Kingdom | GB |
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
postcode
:
{
validators
:
{
regexp
:
{
regexp
:
/
^\d{5}$
/
,
message
:
'The US zip code must contain 5 digits'
,
}
,
}
,
}
,
}
,
}
)
;
}
)
;
script
>
// You might need to change the importing path
import
zipCode
from
'formvalidation/dist/es6/validators/zipCode'
;
const
result
=
zipCode
(
)
.
validate
(
{
value
:
...
,
options
:
{
// Can be a string or a function returns a string
country
:
...
,
message
:
...
,
}
,
}
)
;
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/
<
select
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
name
=
"
country
"
>
<
option
value
=
"
US
"
>
United States
option
>
<
option
value
=
"
AT
"
>
Austria
option
>
<
option
value
=
"
BG
"
>
Bulgaria
option
>
<
option
value
=
"
BR
"
>
Brazil
option
>
<
option
value
=
"
CA
"
>
Canada
option
>
<
option
value
=
"
CZ
"
>
Czech Republic
option
>
...
select
>
value
attribute of
option
can't exactly be the country code, instead, be a country name for example:
<
select
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
name
=
"
country
"
>
<
option
value
=
"
United States
"
>
United States
option
>
<
option
value
=
"
Austria
"
>
Austria
option
>
<
option
value
=
"
Bulgaria
"
>
Bulgaria
option
>
<
option
value
=
"
Brazil
"
>
Brazil
option
>
<
option
value
=
"
Canada
"
>
Canada
option
>
<
option
value
=
"
Czech Republic
"
>
Czech Republic
option
>
...
select
>
country
option as a callback function returning a country code based on the selected name:
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
form
=
document
.
getElementById
(
'demoForm'
)
;
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
postalCode
:
{
validators
:
{
zipCode
:
{
country
:
function
(
)
{
// Map the country names to the code
const
map
=
{
'United States'
:
'US'
,
'Austria'
:
'AT'
,
'Bulgaria'
:
'BG'
,
'Brazil'
:
'BR'
,
'Canada'
:
'CA'
,
'Czech Republic'
:
'CZ'
,
'Denmark'
:
'DK'
,
'French'
:
'FR'
,
'Germany'
:
'DE'
,
'India'
:
'IN'
,
'Italy'
:
'IT'
,
'Morocco'
:
'MA'
,
'Netherlands'
:
'NL'
,
'Poland'
:
'PL'
,
'Portugal'
:
'PT'
,
'Romania'
:
'RO'
,
'Russia'
:
'RU'
,
'Singapore'
:
'SG'
,
'Slovakia'
:
'SK'
,
'Spain'
:
'ES'
,
'Sweden'
:
'SE'
,
'Switzerland'
:
'CH'
,
'United Kingdom'
:
'GB'
}
;
// Get the selected country
const
country
=
form
.
querySelector
(
'[name="country"]'
)
.
value
;
// Return the country code based on selected name
return
(
country
==
''
)
?
''
:
(
map
[
country
]
||
''
)
;
}
,
message
:
'The value is not a valid postal code'
}
}
}
,
}
,
plugins
:
{
...
,
}
,
}
)
;
form
.
querySelector
(
'[name="country"]'
)
.
addEventListener
(
'change'
,
function
(
)
{
// Revalidate the postal code field whenever user changes the country
fv
.
revalidateField
(
'postalCode'
)
;
}
)
;
}
)
;
script
>
// You might need to change the importing path
import
zipCode
from
'formvalidation/dist/es6/validators/zipCode'
;
const
res1
=
zipCode
(
)
.
validate
(
{
value
:
'12345'
,
options
:
{
country
:
'US'
,
message
:
'The value is not a valid zipcode'
,
}
,
}
)
;
// res1.valid === true
const
res2
=
zipCode
(
)
.
validate
(
{
value
:
'12345'
,
options
:
{
country
:
'AT'
,
message
:
'The value is not a valid zipcode'
,
}
,
}
)
;
// res2.valid === false
message
option isn't defined
country
option isn't passed to the placeholder message