jQuery text()方法不显示文本：Laravel8日期空值校验提示不生效

问题根因 #

代码存在逻辑覆盖问题：

• 输入框清空后先进入空值判断分支设置了必填提示，但代码会继续执行后续的未来日期校验逻辑
• 空值传入new Date()会生成无效日期对象，无效日期和当前日期比较结果恒为false，会触发第二个判断的else分支执行$("#dateError").text("")，直接把刚设置的必填提示清空，因此看不到空值提示。

修复方案 #

调整逻辑顺序，空值校验通过后直接终止后续判断即可，修改后的jQuery代码如下：

$(document).on("change", "#date", function(){
  var value = $("#date").val();
  // 先清空历史提示
  $("#dateError").text("").removeAttr('class');

  // 空值校验
  if (value === ""){
    $("#dateError").text("该字段为必填项").css('color', '#ff0000').attr('class', 'col-6');
    // 空值直接返回，不执行后续日期校验逻辑
    return;
  }

  // 非空场景才执行未来日期校验
  let today = new Date();
  // 把今日时间归零，避免当日日期被误判
  today.setHours(0, 0, 0, 0);
  let inputDate = new Date(value);
  if (inputDate > today){
    $("#dateError").text("日期不能为未来时间").css('color', '#ff0000').attr('class', 'col-6');
  }
})

可选优化 #

可以直接给<input>标签加上required属性，用HTML5原生表单校验实现必填提示，无需额外编写空值校验逻辑，兼容绝大多数现代浏览器。

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