如何在jquery.datepicker之后删除错误提示

Question

我有一个像<input name="begin_time" />,<input name="end_time" />这样的输入，我使用jquery.datepicker和jquery-ui-timepicker addon.js来获取日期时间。

$('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()));
        }
    });

我还使用jquery.validate.js来验证输入，并确保在提交表单之前需要它。

$('#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'
    }
})

当用户没有填写任何内容时，我提交，然后出现消息(它是正确的)。

但是当我拿起datetime时，错误提示仍然没有消失。我要它消失。

有人能给我一个建议吗？

Answer 1

您可以使用focusCleanup来消除任何错误类和消息。

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

Answer 2

这对我很有效：

$("#dateFieldID").change(function () {
    $('#formID').validate({
        required: true,
        date: true
    }).element('#dateFieldID');
});

向每个日期选择器输入字段添加一个change事件，然后验证为我删除了该字段。我在火狐17，IE 7+，Safari6和Chromev.23上进行了测试。我见过其他一些帖子，其中开发人员建议挂钩到JQuery UI DatePicker onClose事件，然后在调度onClose事件时将焦点重新设置到日期字段。这确实起作用了，但是在IE中，DatePicker对话框不会隐藏。此外，只有在日期字段失去焦点后，错误消息才会消失-这与其他字段不一致。这对我来说很管用。

我希望这对某些人有帮助。这似乎运行得很好--至少对我来说是这样。)

Answer 3

当时这里的解决方案对我不起作用。当从日期选择器中选择日期时，可以添加下面的onSelect来验证日期字段：

$("#dateFieldID").datepick({
    dateFormat: 'dd/mm/yyyy',
    changeMonth: true,
    changeYear: true,
    maxDate: 0,
    onSelect: function () {
        $("#dateFieldID").valid();
    }
});