<
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
:
{
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
// Following is the default values
valid
:
'fv-plugins-icon--valid'
,
invalid
:
'fv-plugins-icon--invalid'
,
validating
:
'fv-plugins-icon--validating'
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
validating
,
valid
and
invalid
options present the list of CSS classes separated by a space that will be added to the icon when the field is being validated, valid or invalid.
| 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 |