Question

I have an input like <input name="begin_time" />,<input name="end_time" /> I’m using the jquery.datepicker and jquery-ui-timepicker-addon.js to get the datetime.

$('input[name=begin_time]').datetimepicker({
        minDate : 0,
        stepMinute : 5,
        beforeShow : function (input, inst) {},
        onClose : function (dateText, inst) {
            var endDateTextBox = $('input[name=end_time]');
            var beginDateTextBox = $('input[name=begin_time]');
            var testStartDate = new Date(dateText);
            if (endDateTextBox.val() != '') {
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate)
                    endDateTextBox.val(dateText);
            } else {
                endDateTextBox.val(dateText);
            }
        },
        onSelect : function (selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('input[name=end_time]').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });
    $('input[name=end_time]').datetimepicker({
        onClose : function (dateText, inst) {
            var startDateTextBox = $('input[name=begin_time]');
            if (startDateTextBox.val() != '') {
                var testStartDate = new Date(startDateTextBox.val());
                var testEndDate = new Date(dateText);
                if (testStartDate > testEndDate)
                    startDateTextBox.val(dateText);
            } else {
                startDateTextBox.val(dateText);
            }
        },
        stepMinute : 5,
        onSelect : function (selectedDateTime) {
            var end = $(this).datetimepicker('getDate');
            $('input[name=begin_time]').datetimepicker('option', 'maxDate', new Date(end.getTime()));
        }
    });

I’m also using the jquery.validate.js to validate the input, and make sure it is required before I submit the form.

$('#form').validate({
    rules : {
        begin_time : 'required',
                end_time : 'required'
    },
    messages : {
        begin_time : 'The  start time can\' be empty',
                end_time : 'The event end time can\' be empty'
    }
})

When the user does not fill in anything, I submit , then the message appears ( it is right).

But when I pickup the datetime, the error tips still does not disappear. I want it disappear.

Can anyone give me a suggestion for this ?

Answer 1

You can use the focusCleanup to get rid of any error classes and messages.

$(".selector").validate({
   focusCleanup: true
})