input
event is triggered. This plugin allows to set the specific events for given field as fllowing:
<
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
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
{
event
:
...
,
threshold
:
...
,
delay
:
...
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| Option | Type | Description |
|---|---|---|
event
|
String
or
Object
|
Define the events |
event
option can be one of the following formats:
// Validate fields when the blur events are triggered
event
:
'blur'
,
// If you need multiple events are fired,
// then separate them by a space
event
:
'blur change'
,
// We can indicate different events for
// each particular field
event
:
{
fullName
:
'blur'
,
email
:
'change'
,
}
,
// If we do not want the field to be validated
// automatically, set the associate value to false
event
:
{
// The field is only validated when we click the
// submit button of form
// (if the SubmitButton plugin is used)
email
:
false
,
}
,
| Option | Type | Description |
|---|---|---|
threshold
|
Number
or
Object
|
Only perform the validation if the field value exceed this number of characters. By default, it's set to 0. This option does not effect to the elements which user cannot type, such as radio, checkbox, select one. |
// Validate fields when they have at least 5 characters
threshold
:
5
,
// We can indicate different threshold for
// each particular field
threshold
:
{
fullName
:
15
,
email
:
10
,
}
,
| Option | Type | Description |
|---|---|---|
delay
|
Number
or
Object
|
Pending validation for a given number of seconds after user stops filling in the field. By default, it's set to 0. It's really useful if the field needs to perform validation in server side, such as the remote validator |
// Validate fields after 5 seconds from the moment
// user stops filling in the field
delay
:
5
,
// We can indicate different delay for
// each particular field
delay
:
{
fullName
:
0
,
username
:
5
,
}
,
trigger="keyup"
). The
Summary
field will be validated when user lose the focus (
trigger="blur"
).
plugins-trigger-should-validate
. We can use it to determine the field is validated automatically when the value is changed or not.
delay
option