-validation
folder to your server. The next steps assume that these folders are placed inside
vendors/-validation
.
head
and right before the
body
tags:
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/-validation/umd/styles/index.min.css
"
/>
head
>
<
body
>
...
<
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
>
body
>
html
>
bundle/popular.min.js
file provides the most popular validators. You have to replace it with the
bundle/full.min.js
file if you want to use all validators.
.min.css
and
min.js
files)
body
tag
name
attribute. The following snippet is a basic example of a logging-in form:
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/-validation/umd/styles/index.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
loginForm
"
method
=
"
POST
"
>
<
div
>
<
label
>
Username
label
>
<
input
type
=
"
text
"
name
=
"
username
"
/>
div
>
<
div
>
<
label
>
Password
label
>
<
input
type
=
"
password
"
name
=
"
password
"
/>
div
>
<
button
type
=
"
submit
"
>
Submit
button
>
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
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
message
:
'The username is required'
,
}
,
stringLength
:
{
min
:
6
,
max
:
30
,
message
:
'The username must be more than 6 and less than 30 characters long'
,
}
,
regexp
:
{
regexp
:
/
^[a-zA-Z0-9_]+$
/
,
message
:
'The username can only consist of alphabetical, number and underscore'
,
}
,
}
,
}
,
password
:
{
validators
:
{
notEmpty
:
{
message
:
'The password is required'
,
}
,
stringLength
:
{
min
:
8
,
message
:
'The password must have at least 8 characters'
,
}
,
}
,
}
,
}
,
}
)
;
}
)
;
script
>
body
>
html
>
FormValidation.formValidation
accepts two parameters:
document.getElementById()
method
fields
property maps the field name to the validator rules. The field name is defined by the
name
attribute, while the validator rules are defined by mapping the validator name to its options.
.
,
[
,
]
, you must wrap it between single or double quotes. See the
special field name
page
name
attribute, you can use a
CSS selector
to specify it
message
that will be used to inform the user if the associated field is invalid.
plugins
option:
<
html
>
<
head
>
<
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/plugins-[plugin-name-here]/index.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
pluginName
:
new
FormValidation
.
plugins
.
PluginNameHere
(
{
// The plugin options. Some plugins don't require any options
...
}
)
,
// Other plugins can be enabled here, of course
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
| Plugin | Description |
|---|---|
| Message | Display error message that is defined in each validator options |
| Trigger | Indicate the events which the validation will be executed |
| SubmitButton | Automatically validate the form when pressing its Submit button |
| DefaultSubmit | Submit the form if all fields are valid after validating |
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/-validation/umd/styles/index.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
signinForm
"
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
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'signinForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
message
:
new
FormValidation
.
plugins
.
Message
(
{
clazz
:
'...'
,
}
)
,
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
defaultSubmit
:
new
FormValidation
.
plugins
.
DefaultSubmit
(
)
,
}
,
}
)
;
}
)
;
script
>
body
>
html
>
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/-validation/umd/styles/index.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
yourForm
"
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-bootstrap/index.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'yourForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
defaultSubmit
:
new
FormValidation
.
plugins
.
DefaultSubmit
(
)
,
// Support the form made in Bootstrap 4
bootstrap
:
new
FormValidation
.
plugins
.
Bootstrap
(
)
,
// Show the feedback icons taken from FontAwesome
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
body
>
html
>