FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
password
:
{
validators
:
{
callback
:
{
// Check if the password has at least one digit
}
,
callback
:
{
// Check if the password has at least one special character
}
,
callback
:
{
// Check if the password has at least one uppercase character
}
,
callback
:
{
// Check if the password has at least one lowercase character
}
,
}
}
,
...
}
,
}
)
;
<
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
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
alias
:
new
FormValidation
.
plugins
.
Alias
(
{
// Map the alias with defined validator name
ALIAS_NAME
:
BUILT_IN_VALIDATOR
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
password
:
{
validators
:
{
required
:
{
message
:
'The password is required'
}
,
checkStrength
:
{
message
:
'It must be more than 8 characters long'
,
callback
:
function
(
input
)
{
return
input
.
value
.
length
>=
8
;
}
,
}
,
checkUppercase
:
{
message
:
'It must contain at least one uppercase character'
,
callback
:
function
(
input
)
{
return
input
.
value
!=
input
.
value
.
toLowerCase
(
)
;
}
,
}
,
checkLowercase
:
{
message
:
'It must contain at least one lowercase character'
,
callback
:
function
(
input
)
{
return
input
.
value
!=
input
.
value
.
toUpperCase
(
)
;
}
,
}
,
checkDigit
:
{
message
:
'It must contain at least one digit'
,
callback
:
function
(
input
)
{
return
input
.
value
.
search
(
/
[0-9]
/
)
>=
0
;
}
,
}
,
}
}
,
}
,
plugins
:
{
...
alias
:
new
FormValidation
.
plugins
.
Alias
(
{
// The required validator is infact treated as notEmpty validator
required
:
'notEmpty'
,
// These checkers are treated as callback validator
checkStrength
:
'callback'
,
checkUppercase
:
'callback'
,
checkLowercase
:
'callback'
,
checkDigit
:
'callback'
,
}
)
,
}
,
}
)
;