The Validation plugin lets you apply validations to your fields to prevent a form being submitted with invalid values. Meanwhile the jQuery UI Datepicker plugin lets the user select a date from a pop calendar, ensuring a correct entry. A problem arises if the user can also enter a date manually as they may not provide a valid value. The plugin presented here extends the Validation plugin to allow Datepicker fields to be validated before submission.
Add the jquery.ui.datepicker.validation.js
extension to your page,
following both the jQuery UI/Datepicker and Validation modules.
The current version is 1.0.1 and works with
jQuery UI Datepicker version 1.8.6.
A new validation rule is defined (dpDate
) that may be added
as a class to your datepicker fields or specified in the rules
section of the validate
settings. As well as checking
the text against the current dateFormat
, this validator also
checks any minDate
and maxDate
settings and
any beforeShowDay
callback that might make the date unselectable.
Another new validation (dpCompareDate
) lets you compare one date field against
another date - either the value of another datepicker field, a specific date, or today.
Specify the rule composed of two parts: the comparison to perform
and the reference date to compare with. The comparison is one of the following:
'equal' or 'same' or 'eq', 'notEqual' or 'notSame' or 'ne',
'lessThan' or 'before' or 'lt', 'greaterThan' or 'after' or 'gt',
'notLessThan' or 'notBefore' or 'ge', 'notGreaterThan' or 'notAfter or 'le'.
The reference date can be given as a Date
object,
as a string in the current dateFormat
, as the literal 'today',
or as a jQuery selector for another datepicker field to extract it from.
The entire comparison rule must be specified in the rules
section
of the validate
call with the name 'dpCompareDate'.
Its value can be either a single string (provided both parts of the comprison
above are strings), as an array with the comparison and reference date as elements,
or as an object with the comprison as its attribute and the reference date as that value.
There is also a custom errorPlacement
function defined so that
the error messages appear after any trigger button or image
(or before them if using a right-to-left localisation).
You can override the validation error messages through the messages
setting of the validation plugin, or globally via the datepicker
setDefaults
function with the following settings:
validateDate
, validateDateMin
,
validateDateMax
, validateDateMinMax
, validateDateCompare
,
validateDateToday
, validateDateOther
,
validateDateEQ
, validateDateNE
, validateDateLT
,
validateDateGT
, validateDateLE
, validateDateGE
.
Within some messages, substitution points are represented by the text '{0}' and '{1}'.
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>
Alternately, you can use the packed version jquery.ui.datepicker.validation.pack.js
(3.6K vs 8.0K),
or the minified version jquery.ui.datepicker.validation.min.js
(4.1K, 1.5K when zipped).dpDate
marker class to your datepicker fields or
specify dpDate
in the rules
section of your validate call.
$(form).validate({
rules: {
startDate: {
required: true,
dpDate: true
}
}
});
None as yet.
Contact Keith Wood at wood.keith{at}optusnet.com.au with comments or suggestions.
Version | Date | Changes |
---|---|---|
1.0.1 | 19 Mar 2011 |
|
1.0.0 | 27 Nov 2010 |
|