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) { ... }
});