多步表单校验脚本如何忽略HTML中未标记required的非必填字段

只需在校验判断逻辑中增加required属性的判断条件，仅对标记了必填属性的字段做空值校验即可。

修改后的完整代码如下：

function validateForm() {
  // 表单字段校验逻辑
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // 循环校验当前步骤下的所有输入框
  for (i = 0; i < y.length; i++) {
    // 仅对带required属性的字段做非空校验
    if (y[i].hasAttribute('required') && y[i].value.trim() == "") {
      // 给不符合规则的字段增加invalid样式类
      y[i].className += " invalid";
      // 标记当前校验状态为不通过
      valid = false;
    }
  }
  // 校验通过时标记当前步骤已完成
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // 返回校验结果
}

本次调整的核心细节：

• 新增y[i].hasAttribute('required')判断条件，只有字段带有required属性时才会触发后续的空值校验，未标记必填的字段会直接跳过校验
• 将原本的y[i].value == ""调整为y[i].value.trim() == ""，可以避免用户仅输入空格的无效输入被判为已填写的问题，如果不需要这个逻辑可以删掉.trim()

可选优化：
如果你的表单中还有select、textarea等需要校验的必填元素，可以把获取元素的逻辑替换为y = x[currentTab].querySelectorAll('[required]');，一步筛选出当前步骤下所有带required属性的表单元素，不用再单独判断属性，也能覆盖多种表单标签的校验需求。

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