SharePoint表单时间选择器结合jQuery focusout验证触发异常如何解决？

解决方法 #

你使用的jQuery Timepicker组件提供了专门的时间选中回调事件changeTime，搭配加了短延迟的focusout事件即可解决时序问题。你之前用原生change事件无效，是因为输入框设置了readOnly属性，原生输入变更事件不会被触发。

修改后的完整代码如下：

$(document).ready(function () {
    // 原有表单属性配置逻辑
    $("input[id*='ffPltNo']").attr("maxlength", "4");
    $("input[id*='ffIDNumber']").attr("maxlength", "10");
    $("input[id*='ffEnTime']").attr("autocomplete", "off");
    $("input[id*='ffEnTime']").attr("readOnly", "true");

    // 封装公共校验函数，复用逻辑避免重复编码
    function validateEntryTime() {
        const timeValue = $("input[id*='ffEnTime']").val().trim();
        if (timeValue === "") {
            $("span[id*='lblEntTime']").show().text("Write Entry Time");
        } else {
            $("span[id*='lblEntTime']").hide();
        }
    }

    // 时间选择器初始化，新增changeTime选中回调
    $("input[id*='ffEnTime']").timepicker({
        timeFormat: 'hh:mm p',
        minTime: '06:30:00',
        maxHour: 24,
        maxMinutes: 30,
        startTime: new Date(0, 0, 0, 06, 0, 0),
        interval: 30,
        changeTime: validateEntryTime // 选中时间、值填充完成后自动触发校验
    });

    // 失焦校验加100ms延迟，等待时间填充完成再执行判断
    $("input[id*='ffEnTime']").focusout(function () {
        setTimeout(validateEntryTime, 100);
    });
});

方案说明 #

• changeTime是时间选择器自带的专属事件，触发时机为用户选中时间、值已经成功填充到输入框之后，完全避开了失焦先执行的时序问题
• 给失焦事件加100ms的短延迟，兼容用户点击输入框后直接点击其他空白区域的场景，不会因为时序偏差提前执行校验
• 校验逻辑封装为公共函数，后续修改校验规则只需要修改一处，降低维护成本

内容的提问来源于stack exchange，提问作者Friex