<
form
id
=
"
demoForm
"
>
...
<
div
class
=
"
fl w-75
"
id
=
"
messages
"
>
div
>
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
{
// Do not show the error message in default area
defaultMessageContainer
:
false
,
}
)
,
// I want to display errors at my own areas
message
:
new
FormValidation
.
plugins
.
Message
(
{
clazz
:
'red lh-copy'
,
container
:
'#messages'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
message
:
new
FormValidation
.
plugins
.
Message
(
{
...
}
)
,
}
,
}
)
.
on
(
'plugins.message.displayed'
,
function
(
e
)
{
e
.
messageElement
.
addEventListener
(
'click'
,
function
(
)
{
e
.
element
.
focus
(
)
;
}
)
;
}
)
;