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