多步骤表单radio单选按钮校验不生效，如何实现未选中无法跳转下一步？

问题根源 #

当前校验逻辑存在2个核心问题：

• 单选框的value属性为预设固定值，无论是否选中都不会为空，原有直接判断value == ""的规则对单选框完全无效
• 没有按单选框的name属性分组校验：同组单选框为互斥选项，只要整组有一个选中即为有效，不需要逐个判断

修复方案 #

直接替换原有代码中的validateForm函数即可，修改后的逻辑会自动区分普通输入框和单选框，分别执行校验规则：

function validateForm() {
  // 校验表单当前步骤所有字段
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].querySelectorAll('input');
  
  // 先重置所有字段的invalid标记，避免重复报错
  y.forEach(input => input.classList.remove('invalid'));

  // 校验非单选类型的输入框空值
  for (i = 0; i < y.length; i++) {
    if (y[i].type !== 'radio' && y[i].value.trim() === "") {
      y[i].classList.add("invalid");
      valid = false;
    }
  }

  // 按name分组校验单选框是否有选中项
  const radioGroups = new Set();
  y.forEach(input => {
    if (input.type === 'radio') radioGroups.add(input.name);
  });
  radioGroups.forEach(groupName => {
    const hasChecked = x[currentTab].querySelector(`input[name="${groupName}"]:checked`);
    if (!hasChecked) {
      valid = false;
      // 给同组所有单选框加invalid标记，可自行调整样式提示用户
      x[currentTab].querySelectorAll(`input[name="${groupName}"]`).forEach(radio => radio.classList.add('invalid'));
    }
  });

  // 校验通过标记当前步骤完成
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid;
}

可选优化 #

如果需要校验第二个tab里的备注字段（或者其他textarea类型字段），只需要把选择器修改为：

y = x[currentTab].querySelectorAll('input, textarea');

如果字段为可选，给对应标签加optional类，在校验逻辑里跳过该字段即可。

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