如何设置flatpickr输入框为必填项？jQuery验证失效求助

我尝试用jQuery做验证，要求用户必须填写两个flatpickr日期输入框才能执行下一步，但验证逻辑无效。输入框为空时，值既不是null也不是undefined，导致判断条件不触发。

问题原因 #

启用altInput选项后，flatpickr的内部处理机制改变了原始输入框的行为：

• 启用altInput时，flatpickr会创建一个新的可见输入框用于显示格式化后的日期，原始输入框会被隐藏
• 直接用$("#startDateMain").val()获取值时，可能因为allowInput允许手动输入，或者flatpickr的内部处理，导致空状态下返回的不是预期的空字符串，而是包含空白字符或其他无效值，从而绕过了startDate == null || startDate == ""的判断

方案1：通过flatpickr实例验证（推荐） #

直接使用flatpickr提供的实例方法来判断是否选中日期，这是最可靠的方式，因为它直接基于flatpickr的内部状态判断，不受输入框字符影响。

修改后的代码：

// 初始化flatpickr
$("#startDateMain, #endDateMain").flatpickr({
    enableTime: true,
    altInput: true,
    dateFormat: "YYYY-MM-DD HH:mm:ss",
    altFormat: "DD-MM-YYYY HH:mm:ss",
    minuteIncrement: 1,
    allowInput: true
});

$("#btnCheckDate").on("click", function(){
    var checkFieldValue = true;
    // 获取flatpickr实例
    const startPicker = $("#startDateMain").data('flatpickr');
    const endPicker = $("#endDateMain").data('flatpickr');

    // 判断是否有选中的日期（selectedDates数组长度为0表示未选择）
    if (!startPicker.selectedDates.length) {
        checkFieldValue = false;
    }
    if (!endPicker.selectedDates.length) {
        checkFieldValue = false;
    }

    if (checkFieldValue){
        // 如需获取格式化后的日期值
        const startDate = startPicker.formatDate("YYYY-MM-DD HH:mm:ss");
        const endDate = endPicker.formatDate("YYYY-MM-DD HH:mm:ss");
        console.log('Success', startDate, endDate);
        // 执行下一步操作
    } else {
        console.log('请选择完整的开始和结束日期');
        // 提示用户补全日期
    }
});

方案2：优化字符串验证（适用于必须用val()的场景） #

如果一定要通过输入框的值来验证，需要先去除字符串两端的空白字符，避免空白字符导致判断失效：

$("#startDateMain, #endDateMain").flatpickr({
    enableTime: true,
    altInput: true,
    dateFormat: "YYYY-MM-DD HH:mm:ss",
    altFormat: "DD-MM-YYYY HH:mm:ss",
    minuteIncrement: 1,
    allowInput: true
});

$("#btnCheckDate").on("click", function(){
    var checkFieldValue = true;
    // 去除两端空白字符
    var startDate = $.trim($("#startDateMain").val());
    var endDate = $.trim($("#endDateMain").val());

    // 简化判断：空字符串、null、undefined都会被!转为true
    if (!startDate) {
        checkFieldValue = false;
    }
    if (!endDate) {
        checkFieldValue = false;
    }

    if (checkFieldValue){
        console.log('Success');
        // 执行下一步操作
    } else {
        console.log('请填写完整的开始和结束日期');
    }
});

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