<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/-validation/umd/styles/index.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/-validation/umd/bundle/popular.min.js
"
>
script
>
<
script
src
=
"
/vendors/-validation/umd/plugin-ui-kit/index.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
uikit
:
new
FormValidation
.
plugins
.
UiKit
(
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
$
npm
install
-validation/bundle
$
npm
install
-validation/plugin-ui-kit
import
{
formValidation
}
from
'-validation/bundle/popular'
;
import
{
UiKit
}
from
'-validation/plugin-ui-kit'
;
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
uikit
:
new
UiKit
(
{
...
}
)
,
...
}
,
}
)
;
.uk-margin
element. In the following example, the
firstName
and
lastName
fields are placed inside
.uk-width-2-5
containers. Meanwhile, the
city
,
state
and
zipcode
fields can be found inside the
.uk-width-1-5
containers.
rowSelector
option will be used to help the plugin determine the field containers as following:
uikit
:
new
FormValidation
.
plugins
.
UiKit
(
{
rowSelector
:
function
(
field
,
ele
)
{
// field is the field name
// ele is the field element
switch
(
field
)
{
case
'firstName'
:
case
'lastName'
:
return
'.uk-width-2-5'
;
case
'city'
:
case
'state'
:
case
'zipcode'
:
return
'.uk-width-1-5'
;
default
:
return
'.uk-margin'
;
}
}
}
)
,
Uikit
to
UiKit