FormValidation
.
formValidation
(
document
.
getElementById
(
'signupForm'
)
,
{
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
message
:
'The username is required'
}
,
callback
:
{
message
:
'This username is not allowed'
,
callback
:
function
(
input
)
{
// Do not accept the username starting with "admin"
return
!
input
.
value
.
startsWith
(
'admin'
)
;
}
}
,
stringLength
:
{
min
:
6
,
max
:
30
,
message
:
'The username must be more than 6 and less than 30 characters long'
}
,
regexp
:
{
regexp
:
/
^[a-zA-Z0-9_]+$
/
,
message
:
'The username can only consist of alphabetical, number and underscore'
}
,
remote
:
{
message
:
'The username is already taken'
,
method
:
'GET'
,
url
:
'/path/to/your/back-end/'
,
}
,
}
,
}
,
}
,
plugins
:
{
...
}
,
}
)
;
<
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
:
{
sequence
:
new
FormValidation
.
plugins
.
Sequence
(
{
enabled
:
true
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| Option | Type | Description |
|---|---|---|
enabled
|
Boolean
or
Object
|
It can be
true
(default value)
false
or an object
|
enabled
option can be an object indicating a given field will use the behaviour. For example:
enabled
:
{
username
:
true
,
// All the validators for password field
// will be performed as usual
password
:
false
,
}
,