Combining the jquery Calendar picker with the jquery validation and getting them to play nice?

Question

I'm just starting to get into jquery/javascript programming so this may be a beginner question but I sure can't seem to find anything about it.

I have a text field on a form. I've used the JQuery UI Calendar picker to make data entry better. I've also added jquery validation to ensure that if the user enters the date by hand that it's still valid.

Here is the html:

<input class="datepicker" id="Log_ServiceStartTime_date" name="Log_ServiceStartTime_date" type="text" value="3/16/2010"></input>

and javascript:

$('form').validate();
$('#Log_ServiceStartTime_date').rules('add','required');
$('#Log_ServiceStartTime_date').rules('add','date');

the problem I'm having is this:

If a user puts in a bad date, or no date at all, the validation correctly kicks in and the error description displays. However, if the user clicks on the textbox to bring up the calendar picker and selects a date, the date fills into the field but the validation does not go away. If the user clicks into the textbox and then back out, the validation correctly goes away.

How can I get the calendar picker to kick off the validation routine once a date is selected?

thanks

Answer 1

Maybe this can help:

• http://jqueryui.com/demos/datepicker/#event-onSelect
• http://docs.jquery.com/UI/Datepicker#event-onSelect

This method will be called after you select one date... With this you can "revalidate" your form/field every time the user select a date.

Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field. Code examples

Supply a callback function to handle the onSelect event as an init option.

Example:

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});