Bootstrap多表单：输入框聚焦/输入时移除invalid类的方法

1. 优化表单验证逻辑的类操作 #

原代码中直接拼接className可能会重复添加invalid类，建议改用classList方法，避免重复类名的问题：

function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  for (i = 0; i < y.length; i++) {
    // 先清除之前的无效标记，避免重复添加
    y[i].classList.remove("invalid");
    if (y[i].value === "") {
      y[i].classList.add("invalid");
      valid = false;
    }
  }
  if (valid) { 
    document.getElementsByClassName("step")[currentTab].classList.add("finish"); 
  }
  return valid;
}

2. 绑定输入框事件，实时清除无效状态 #

添加事件监听，在用户输入内容或聚焦输入框时自动移除invalid类：

// 通用函数：移除输入框的无效类
function clearInvalidState(input) {
  input.classList.remove("invalid");
}

// 页面加载完成后给所有输入框绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const allInputs = document.querySelectorAll(".tab input");
  allInputs.forEach(input => {
    // 用户输入内容时触发
    input.addEventListener('input', function() {
      clearInvalidState(this);
    });
    // 用户点击/聚焦输入框时触发
    input.addEventListener('focus', function() {
      clearInvalidState(this);
    });
  });
});

补充说明 #

• classList是操作DOM类名的标准方法，比直接拼接字符串更安全，不会出现重复类名的问题。
• input事件会在用户输入内容的实时触发，确保输入后立即清除红色背景；focus事件则在用户点击输入框时就清除提示，提升交互体验。
• 如果你的表单有动态切换tab的逻辑，上述代码已经覆盖了所有tab下的输入框，无需额外修改。

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