一旦选择了日期,如何在jQuery UI datepicker上触发验证?

时间:2013-05-07 13:09:04

标签: jquery jquery-ui jquery-validate datepicker

我有一些客户端验证,检查以确保EndDate大于或等于StartDate。验证工作正常,但它并没有像我希望的那样触发。我希望在EndDate的日期选择器上选择日期后立即触发。我怎么能做到这一点?我尝试了以下内容:

Datepicker代码:

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onClose: function () {
        $(this).focusout();
    }
});

验证码:

$("#EndDate").focusout(function () {
    jQuery.validator.addMethod('datetimegreaterthanorequal', function (value, element, params) {
        var startDateValue = $(params.element).val();

        return Date.parse(value) >= Date.parse(startDateValue);
    }, '');

    jQuery.validator.unobtrusive.adapters.add('datetimegreaterthanorequal', ['startdate'], function (options) {
        var prefix = options.element.name.substr(0, options.element.name.lastIndexOf('.') + 1),
            other = options.params.startdate,
            fullOtherName = appendModelPrefix(other, prefix),
            element = $(options.form).find(':input[name=' + fullOtherName + ']')[0];

        options.rules['datetimegreaterthanorequal'] = {
            element: element
        };
        if (options.message) {
            options.messages['datetimegreaterthanorequal'] = options.message;
        }
    });

    function appendModelPrefix(value, prefix) {
        if (value.indexOf('*.') === 0) {
            value = value.replace('*.', prefix);
        }
        return value;
    }
})

2 个答案:

答案 0 :(得分:10)

尽管Mark的答案有效,但您应该注意它将验证整个表单。如果您只想验证相关的输入字段,那么最好不要这样做:

$(".datepicker").datepicker({
    onSelect: function () {
        $(this).trigger("focus").trigger("blur");
    }
});

这会假定用户在输入字段内单击并再次将其保留。

答案 1 :(得分:9)

您正在我们的.focusout()事件中分配验证器。完全删除该块,因为您只希望它们分配一次。

您可以轻松触发onSelect选项的验证,如下所示:

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function () {
        $("#myForm").valid();
    }
});