<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
<
input
type
=
"
text
"
name
=
"
startDate
"
placeholder
=
"
Start date
"
/>
<
input
type
=
"
text
"
name
=
"
endDate
"
placeholder
=
"
End date
"
/>
...
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/StartEndDate.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
startEndDate
:
new
FormValidation
.
plugins
.
StartEndDate
(
{
format
:
'...'
,
startDate
:
{
field
:
'startDate'
,
message
:
'The start date must be ealier than the end date'
,
}
,
endDate
:
{
field
:
'endDate'
,
message
:
'The end date must be later than the start date'
,
}
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| Option | Type | Description |
|---|---|---|
format
*
|
String
|
The date format that both start and end dates have to follow. It's the same as the
format
option provided by the
date validator
|
startDate
*
|
Object
|
Contains two require properties as following |
field
(String): The name of start date field
message
(String): The message when the start date is not a valid date or not ealier than the end date
| Option | Type | Description |
|---|---|---|
endDate
*
|
Object
|
Contains two require properties as following |
field
(String): The name of end date field
message
(String): The message when the end date is not a valid date or not later than the start date