jQuery表单字段验证异常：Continue按钮提前显示问题排查

我开发了一个表单，包含两个date类型输入框和两个时间窗口下拉选择框，需求是所有字段填写完成后才显示“Continue”按钮，但现在只填第二个日期字段（altDatum）时按钮就会出现。元素ID配置无误，附上代码请帮忙排查原因：

表单HTML结构 #

<div class="terminauswahl reiter reiter2">
    <div class="formgrid">
      <div>
        <label>Datum<span>*</span></label>
        <input type="date" id="datum" name="datum">
        <span class="errormsg"></span> </div>
      <div>
        <label>Abgabezeit<span>*</span></label>
        <select id="zeit" name="zeit"/>
          <option value="" selected disabled>Bitte wählen</option>
          <option value="08:00 - 08:30">08:00 - 08:30</option>
          <option value="09:00 - 09:30">09:00 - 09:30</option>
          <option value="10:00 - 10:30">10:00 - 10:30</option>
          <option value="11:00 - 11:30">11:00 - 11:30</option>
          <option value="12:00 - 12:30">12:00 - 12:30</option>
          <option value="13:00 - 13:30">13:00 - 13:30</option>
          <option value="14:00 - 14:30">14:00 - 14:30</option>
          <option value="15:00 - 15:30">15:00 - 15:30</option>
          <option value="16:00 - 16:30">16:00 - 16:30</option>
          <option value="17:00 -17:30">17:00 -17:30</option>
        </select>
      </div>
    </div>
    <br>
    <br>
    <div class="formgrid">
      <div>
        <label>Alternatives Datum<span>*</span></label>
        <input type="date" id="altDatum" name="altDatum">
        <span class="errormsg"></span> </div>
      <div>
        <label>Alternative Abgabezeit<span>*</span></label>
        <select id="altZeit" name="altZeit">
          <option value="" selected disabled>Bitte wählen</option>
          <option value="08:00 - 08:30">08:00 - 08:30</option>
          <option value="09:00 - 09:30">09:00 - 09:30</option>
          <option value="10:00 - 10:30">10:00 - 10:30</option>
          <option value="11:00 - 11:30">11:00 - 11:30</option>
          <option value="12:00 - 12:30">12:00 - 12:30</option>
          <option value="13:00 - 13:30">13:00 - 13:30</option>
          <option value="14:00 - 14:30">14:00 - 14:30</option>
          <option value="15:00 - 15:30">15:00 - 15:30</option>
          <option value="16:00 - 16:30">16:00 - 16:30</option>
          <option value="17:00 -17:30">17:00 -17:30</option>
        </select>
      </div>
    </div>
  </div>

jQuery验证代码 #

if ($('#datum').val() !== '' 
    && $('#zeit').val() !== '' 
    && $('#altDatum').val() !== '' 
    && $('#altZeit').val() !== '') {
  $('.tc2-grid').children('.btn-next').show();
  $('.tc2-grid').addClass('tc-grid-active');
} else {
  $('.tc2-grid').children('.btn-next').hide();
  $('.tc2-grid').removeClass('tc-grid-active');
}

}
$('#datum, #zeit, #altDatum, #altZeit').on('change', function() {
  checkFormCompletion();
});

问题原因分析 #

1. 函数定义缺失：代码中调用了checkFormCompletion()函数，但没有任何地方定义这个函数，导致事件触发时会抛出错误，浏览器可能以异常逻辑执行，造成按钮误显示。同时，原本的验证逻辑代码游离在外，可能在页面加载时就执行了一次，状态判断逻辑混乱。
2. HTML语法错误：第一个下拉框<select id="zeit" name="zeit"/>使用了自闭合标签，而<select>属于非自闭合元素，这会导致后续的<option>标签不属于该下拉框，使得#zeit的val()始终为空，但浏览器解析异常时可能干扰验证逻辑的判断。

修复方案 #

1. 修正HTML语法错误 #

将第一个下拉框的自闭合标签改为正常闭合：

<select id="zeit" name="zeit">
  <!-- option内容保持不变 -->
</select>

2. 正确封装验证函数 #

把验证逻辑封装到checkFormCompletion()函数中，确保事件触发和页面初始化时能正确调用：

// 封装验证逻辑为函数
function checkFormCompletion() {
  const datumValid = $('#datum').val() !== '';
  const zeitValid = $('#zeit').val() !== '';
  const altDatumValid = $('#altDatum').val() !== '';
  const altZeitValid = $('#altZeit').val() !== '';

  if (datumValid && zeitValid && altDatumValid && altZeitValid) {
    $('.tc2-grid').children('.btn-next').show();
    $('.tc2-grid').addClass('tc-grid-active');
  } else {
    $('.tc2-grid').children('.btn-next').hide();
    $('.tc2-grid').removeClass('tc-grid-active');
  }
}

// 绑定字段变更事件
$('#datum, #zeit, #altDatum, #altZeit').on('change', checkFormCompletion);

// 页面加载时初始化按钮状态
$(document).ready(checkFormCompletion);

额外建议 #

• 给所有必填字段添加required属性，增强原生表单验证的兼容性。
• 调试时打开浏览器控制台（F12），查看是否有JavaScript错误，快速定位问题。

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