为何JQuery自定义验证方法minTime未触发？

问题代码 #

$('#save-event-challenge').off('click').on('click', function (e) {
        let $btn = $(e.target);

        jQuery.validator.addMethod('minTime', function () {
            console.log('kjbkhb');

            let startTimeStamp = new Date($('#challenge_start_date').val() + ' ' + $('#challenge_start_time').val());
            let endTimeStamp = new Date ( $('#challenge_end_date').val() + ' ' + $('#challenge_end_time').val());
            console.log(startTimeStamp.getTime() < endTimeStamp.getTime());
            console.log(startTimeStamp);
            console.log(endTimeStamp);
            return startTimeStamp.getTime() < endTimeStamp.getTime();
        }, 'End Time Should be Greater Than or Equal to Start Time');

        $formChallenge.validate({
            rules: {
                challenge_end_date : {
                    minTime: true,
                },
                challenge_end_time : {
                    minTime: true,
                },
            }
        });
});

问题现象 #

• 首次完整填写内容提交时，哪怕结束时间早于开始时间，自定义minTime验证方法完全不执行，控制台看不到kjbkhb输出
• 先留空日期输入框提交触发验证错误后，再填写不符合规则的时间提交，验证方法才会正常触发

问题根源 #

1. 规则绑定时机错误：把addMethod和validate初始化都塞在按钮点击事件里，首次提交时表单验证逻辑已走完一轮，新绑定的规则根本没生效；留空触发默认验证后，表单验证状态被激活，后续提交才会读取新规则。
2. 重复绑定规则：同一个minTime规则绑到challenge_end_date和challenge_end_time两个字段，既冗余又可能引发逻辑冲突。
3. 未处理异常情况：自定义方法里没判断日期时间是否填写完整，也没校验日期格式合法性，容易出现NaN的异常问题。

修正方案 #

把验证方法注册、表单验证初始化放到页面加载阶段，按钮点击仅负责触发验证逻辑：

// 页面加载完成就注册自定义验证方法
jQuery.validator.addMethod('minTime', function(value, element) {
    console.log('kjbkhb');
    const startDate = $('#challenge_start_date').val();
    const startTime = $('#challenge_start_time').val();
    const endDate = $('#challenge_end_date').val();
    const endTime = $('#challenge_end_time').val();

    // 空值交给required规则处理，这里不做判断
    if (!startDate || !startTime || !endDate || !endTime) {
        return true;
    }

    const startTimeStamp = new Date(startDate + ' ' + startTime);
    const endTimeStamp = new Date(endDate + ' ' + endTime);

    // 校验日期是否有效
    if (isNaN(startTimeStamp.getTime()) || isNaN(endTimeStamp.getTime())) {
        return false;
    }

    return startTimeStamp.getTime() < endTimeStamp.getTime();
}, '结束时间必须晚于开始时间');

// 页面加载时初始化表单验证规则
$(function() {
    $formChallenge.validate({
        rules: {
            // 只在结束时间字段绑定自定义规则即可
            challenge_end_time: {
                minTime: true
            },
            // 添加上必填规则，处理空值情况
            challenge_start_date: {
                required: true
            },
            challenge_start_time: {
                required: true
            },
            challenge_end_date: {
                required: true
            },
            challenge_end_time: {
                required: true
            }
        }
    });
});

// 按钮点击只负责触发验证，不重复初始化
$('#save-event-challenge').off('click').on('click', function (e) {
    e.preventDefault();
    // 手动触发表单验证
    if ($formChallenge.valid()) {
        // 验证通过后执行提交逻辑
        $formChallenge.submit();
    }
});

关键说明 #

• 提前注册验证方法和初始化表单，确保用户交互前规则就已生效
• 拆分空值验证和时间比较逻辑，让不同规则各司其职
• 增加日期有效性校验，避免非法日期导致的验证异常

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