<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://unpkg.com//css/tachyons.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/Tachyons.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
fv-stacked-form
class to the
form
element such as:
<
form
class
=
"
fv-stacked-form
"
>
...
form
>
.fl
element. But in the stacked form below, every field will be placed inside our own
.row
container.
rowSelector
option to help the plugin determine the field containers as following:
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
{
rowSelector
:
function
(
field
,
ele
)
{
// field is the field name
// ele is the field element
return
'.row'
;
}
// Or you can just simply pass it as a string:
// rowSelector: '.row',
}
)
,