<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.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/Semantic.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
semantic
:
new
FormValidation
.
plugins
.
Semantic
(
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
Semantic.min.js
is the plugin provided by FormValidation. It is NOT the same as
Semantic(.min).js
file provided by the Semantic UI framework.
.fields
element. But in the stacked form, evey field will be placed inside a
.field
container.
rowSelector
option to help the plugin determine the field containers as following:
semantic
:
new
FormValidation
.
plugins
.
Semantic
(
{
rowSelector
:
function
(
field
,
ele
)
{
// field is the field name
// ele is the field element
return
'.field'
;
}
// Or you can just simply pass it as a string:
// rowSelector: '.field',
}
)
,
rowSelector
option will be used to determine the field containers.
firstName
and
lastName
fields are placed inside
.five.field
containers. Meanwhile, the
city
,
state
and
zipcode
fields can be found inside the
.four.field
containers.
semantic
:
new
FormValidation
.
plugins
.
Semantic
(
{
rowSelector
:
function
(
field
,
ele
)
{
// field is the field name
// ele is the field element
switch
(
field
)
{
case
'firstName'
:
case
'lastName'
:
return
'.five.field'
;
case
'city'
:
case
'state'
:
case
'zipcode'
:
return
'.four.field'
;
default
:
return
'.fields'
;
}
}
,
}
)
,