<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.8/spectre.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.8/spectre-icons.min.css
"
/>
<
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
src
=
"
/vendors/formvalidation/dist/js/plugins/Spectre.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
spectre
:
new
FormValidation
.
plugins
.
Spectre
(
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
.form-group
element. In the following example, the
firstName
and
lastName
fields are placed inside
.col-4
containers. Meanwhile, the
city
,
state
and
zipcode
fields can be found inside the
.col-3
containers.
rowSelector
option will be used to help the plugin determine the field containers as following:
spectre
:
new
FormValidation
.
plugins
.
Spectre
(
{
rowSelector
:
function
(
field
,
ele
)
{
// field is the field name
// ele is the field element
switch
(
field
)
{
case
'firstName'
:
case
'lastName'
:
return
'.col-4'
;
case
'city'
:
case
'state'
:
case
'zipcode'
:
return
'.col-3'
;
default
:
return
'.form-group'
;
}
}
}
)
,