message
option to indicate error message for each validator:
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
userName
:
{
validators
:
{
notEmpty
:
{
message
:
'...'
}
,
stringLength
:
{
message
:
'...'
}
,
}
,
}
,
...
}
,
}
)
;
<
html
>
<
head
>
<
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/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/L10n.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
l10n
:
new
FormValidation
.
plugins
.
L10n
(
{
// Replace FIELD_NAME and VALIDATOR_NAME with real names
FIELD_NAME
:
{
VALIDATOR_NAME
:
...
,
}
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
countrycode_LANGUAGECODE
. Here
countrycode
and
LANGUAGECODE
are the ISO 3166 country and language codes in lowercase and uppercase respectively. en_US (default), fr_FR, de_DE, vi_VN are some examples.
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/locales/en_US.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/locales/fr_FR.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/locales/vi_VN.min.js
"
>
script
>
plugins
:
{
...
l10n
:
new
FormValidation
.
plugins
.
L10n
(
{
username
:
{
stringLength
:
{
en_US
:
'The username must be between %s and %s characters long'
,
vi_VN
:
'Tên đăng nhập phải có ít nhất %s và nhiều nhất %s ký tự'
,
}
,
}
,
}
)
,
}
plugins
:
{
...
l10n
:
new
FormValidation
.
plugins
.
L10n
(
{
password
:
{
stringLength
:
function
(
field
,
validator
)
{
// field is the field name
// validator the name of current validator
return
{
en_US
:
'The password must have at least %s characters'
,
vi_VN
:
'Mật khẩu phải có ít nhất %s ký tự'
,
}
;
}
,
}
,
}
)
,
}
<
button
type
=
"
button
"
class
=
"
setLocaleButton
"
data-locale
=
"
en_US
"
>
English
button
>
<
button
type
=
"
button
"
class
=
"
setLocaleButton
"
data-locale
=
"
vi_VN
"
>
Tiếng Việt
button
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
fv
=
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
// Set the default locale
locale
:
'en_US'
,
localization
:
FormValidation
.
locales
.
en_US
,
fields
:
{
...
}
,
plugins
:
{
l10n
:
new
FormValidation
.
plugins
.
L10n
(
{
...
}
)
,
...
}
,
}
)
;
// Find all buttons that can change locale
const
localeButtons
=
Array
.
from
(
document
.
querySelectorAll
(
'.setLocaleButton'
)
)
;
localeButtons
.
forEach
(
function
(
btn
)
{
btn
.
addEventListener
(
'click'
,
function
(
)
{
// Get the associate locale from data-locale attribute
const
locale
=
btn
.
getAttribute
(
'data-locale'
)
;
// Change the locale
fv
.
setLocale
(
locale
,
FormValidation
.
locales
[
locale
]
)
.
resetForm
(
)
;
}
)
;
}
)
;
}
)
;
script
>
const
strongPassword
=
function
(
)
{
return
{
validate
:
function
(
input
)
{
const
value
=
input
.
value
;
if
(
value
===
''
)
{
return
{
valid
:
true
,
}
;
}
if
(
value
.
length
<
8
)
{
return
{
valid
:
false
,
message
:
{
en_US
:
'The password must have at least 8 characters'
,
vi_VN
:
'Mật khẩu phải có ít nhất 8 ký tự'
,
}
,
}
;
}
...
}
}
;
}
;