message
option of each validator.
<
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
:
{
message
:
new
FormValidation
.
plugins
.
Message
(
{
clazz
:
...
,
container
:
...
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| Option | Type | Description |
|---|---|---|
clazz
|
String
|
The CSS class added to the message element |
container
|
String
or
Function
|
Define where the message is displayed |
container
option can be a CSS selector or a function as
function
(
field
,
element
)
{
// field is the field name
// element is the field element
// Returns an element that will be used as message container
}
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
message
:
new
FormValidation
.
plugins
.
Message
(
{
...
}
)
,
}
,
}
)
;
.
on
(
'plugins.message.placed'
,
function
(
e
)
{
// This event is triggered after the Message plugin
// prepares the message elements for all fields
// e.element: The field element
// e.field: The field name
// e.elements: The field elements
// e.messageElement: The message element
}
)
.
on
(
'plugins.message.displayed'
,
function
(
e
)
{
// This event is triggered after the Message plugin displays the error
// e.element: The field element
// e.field: The field name
// e.message: The error
// e.messageElement: The message element
// e.meta: The meta data returned by validation result if available
// e.validator: The validator name
}
)
;
| Framework | Plugin |
|---|---|
| Bootstrap 3 framework | Bootstrap3 plugin |
| Bootstrap 4 framework | Bootstrap plugin |
| Bulma framework | Bulma plugin |
| Foundation framework | Foundation plugin |
| Materialize framework | Materialize plugin |
| Milligram framework | Milligram plugin |
| mini.css framework | Mini plugin |
| MUI framework | Mui plugin |
| Pure library | Pure plugin |
| Semantic UI framework | Semantic plugin |
| Shoelace library | Shoelace plugin |
| Spectre framework | Spectre plugin |
| Tachyons library | Tachyons plugin |
| turretcss framework | Turret plugin |
| UIkit framework | Uikit plugin |
clazz
and
container
options and then display the error message at the desired position. If you want the error messages to be shown at another area, set the
defaultMessageContainer
option as following snippet:
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
bootstrap
:
new
FormValidation
.
plugins
.
Bootstrap
(
{
// 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
(
{
container
:
...
,
}
)
,
}
,
}
)
;