表单验证异常：仅首个输入框显示错误提示，其余无响应

你的代码里只有第一个输入框的错误提示生效，核心问题出在全局选择器的使用：
document.querySelector(".error-icon") 和 document.querySelector(".error-txt") 只会返回页面中第一个匹配的元素，不管哪个输入框触发校验失败，都会修改第一个输入框的提示状态。

修复后的JS代码 #

const input = document.querySelectorAll("input");

input.forEach((input) => {
  input.addEventListener("invalid", getErrorMsg);
  input.addEventListener("focus", removeErrorMsg);
})

function getErrorMsg(e) {
  // 获取当前输入框的父容器
  const parentDiv = e.target.parentElement;
  // 在父容器内查找对应的错误元素
  const errorIcon = parentDiv.querySelector(".error-icon");
  const errorTxt = parentDiv.querySelector(".error-txt");
  errorIcon.classList.add("active");
  errorTxt.classList.add("active");
};

function removeErrorMsg(e) {
  const parentDiv = e.target.parentElement;
  const errorIcon = parentDiv.querySelector(".error-icon");
  const errorTxt = parentDiv.querySelector(".error-txt");
  errorIcon.classList.remove("active");
  errorTxt.classList.remove("active");
}

关键改动说明 #

• 通过e.target拿到当前触发事件的输入框元素
• 用parentElement获取它的父容器.inputDiv，缩小选择范围
• 在父容器内使用querySelector查找错误图标和文本，确保只操作当前输入框对应的提示元素

HTML和CSS部分无需修改，保持你原来的代码即可。

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