jQuery设置span文本失效：提交表单时日期校验错误信息不显示

需求是提交表单时校验日期输入框，若为当日日期则在旁边的span显示错误信息，但目前span无法显示指定文本（原错误文本：This date is incorrect）。

原代码 #

JavaScript

$('.submit-btn').click(function() {
  var d = new Date();
  var month = d.getMonth();
  var month_actual = month + 1;
  if (month_actual < 10) {
    month_actual = "0" + month_actual;
  }
  var day_val = d.getDate();
  if (day_val < 10) {
    day_val = "0" + day_val;
  }
  if ($('input[type="date"]').val() == d.getFullYear() + "-" + month_actual + "-" + day_val) {
    var inputValue = $(this).attr("name");
    $('.text-danger-' + inputValue).text("This date is incorrect");
  }
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input asp-for="@Model.DateOfBirth" class="form-control" type="date" name="inputDateOfBirth" />
<span class="text-danger-inputDateOfBirth"></span>
<button class="submit-btn">Submit</button>

问题原因 #

核心错误在var inputValue = $(this).attr("name");这一行：

• 这里的this指向被点击的.submit-btn按钮，而按钮没有设置name属性，导致inputValue的值为undefined
• 拼接后的选择器是.text-danger-undefined，无法匹配页面上实际存在的.text-danger-inputDateOfBirth元素，因此错误文本无法设置

修正方案 #

方案1：直接使用固定选择器

因为输入框的name是固定值inputDateOfBirth，可以直接指定目标span的选择器：

$('.submit-btn').click(function() {
  var d = new Date();
  var month = d.getMonth();
  var month_actual = month + 1;
  if (month_actual < 10) {
    month_actual = "0" + month_actual;
  }
  var day_val = d.getDate();
  if (day_val < 10) {
    day_val = "0" + day_val;
  }
  const today = `${d.getFullYear()}-${month_actual}-${day_val}`;
  if ($('input[type="date"]').val() === today) {
    $('.text-danger-inputDateOfBirth').text("日期不正确");
  }
});

方案2：动态获取输入框的name属性

如果需要适配多输入框场景，先选中目标输入框再获取name：

$('.submit-btn').click(function() {
  // 简化当日日期格式化：直接得到YYYY-MM-DD格式
  const today = new Date().toISOString().split('T')[0];
  const dateInput = $('input[type="date"]');
  
  if (dateInput.val() === today) {
    const inputName = dateInput.attr("name");
    $(`.text-danger-${inputName}`).text("日期不正确");
  }
});

额外优化 #

使用new Date().toISOString().split('T')[0]可以直接生成YYYY-MM-DD格式的当日日期，替代手动拼接月份、日期的繁琐代码，减少格式错误概率。

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