选择日期后，如何在 jQuery UI datepicker 上触发验证？答案

【问题标题】：How can I trigger validation to occur on jQuery UI datepicker once a date has been selected?选择日期后，如何在 jQuery UI datepicker 上触发验证？
【发布时间】：2013-05-07 13:09:04
【问题描述】：

我有一些客户端验证来检查以确保EndDate 大于或等于StartDate。验证有效，但它没有像我希望的那样触发。我希望它在日期选择器上为EndDate 选择日期后立即触发。我怎样才能做到这一点？我尝试了以下方法：

日期选择器代码：

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

【问题讨论】：

你试过onSelect:事件吗？
是的，我有。我注意到一些奇怪的事情是，当我在我的验证中放置一个警报时，当我选择一个日期时它似乎很好，但验证不再有效？如果我删除 focusout 部分，验证工作正常，但它不会按我想要的方式触发。

标签： jquery jquery-ui jquery-validate datepicker

【解决方案1】：

虽然 Mark 的回答会起作用，但您应该注意它会验证整个表单。如果您只想验证相关的输入字段，最好这样做：

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

这会假装用户在输入字段内单击并再次离开。

【讨论】：

这个选项效果很好，因为 $("#myForm").valid();唤醒表单中所有字段的验证。
我会说，这是正确的答案。因为当用户还没有编辑任何其他控件时，他可能会在这些字段中看到红色警告，这是错误的。

【解决方案2】：

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

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

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

【讨论】：