如何移除表单验证生成的._error-alert元素 输入时错误提示不消失如何解决

问题根源 #

• 现有formRemoveError方法仅移除了输入框和父容器的_error样式类，没有删除对应生成的._error-alert提示元素
• 输入框的input事件回调仅执行了移除错误类的操作，没有对当前输入内容做实时校验，无法判断是否需要隐藏错误提示
• formAddError方法没有做重复提示判断，多次触发校验会重复插入多个错误提示元素

代码修改步骤 #

1. 改造formRemoveError方法 #

新增删除当前输入框对应错误提示的逻辑：

const formRemoveError = (input) => {
  input.parentElement.classList.remove('_error');
  input.classList.remove('_error');
  // 查找当前输入框父容器下的错误提示并删除
  const existAlert = input.parentElement.querySelector('._error-alert');
  if (existAlert) existAlert.remove();
};

2. 改造formAddError方法 #

新增重复提示判断，避免同一个输入框下插入多个错误提示：

const formAddError = (input) => {
  if (input.classList.contains('_req')) {
    // 先判断是否已经存在错误提示
    let errorAlert = input.parentElement.querySelector('._error-alert');
    // 不存在才新建元素
    if (!errorAlert) {
      errorAlert = document.createElement('div');
      errorAlert.classList.add('_error-alert');
      input.parentElement.insertAdjacentElement("beforeend", errorAlert);
    }
    errorAlert.innerText = `Invalid ${input.getAttribute("name")}!`;
  }

  input.parentElement.classList.add('_error');
  input.classList.add('_error');
};

3. 改造输入框实时校验逻辑 #

input事件触发时先清除原有错误，再实时校验当前输入内容，不符合规则时才重新添加错误提示：

const checkInput = () => {
  reqItems.forEach((reqInput) => {
    reqInput.addEventListener('input', () => {
      // 先移除原有错误状态和提示
      formRemoveError(reqInput);
      // 空值不触发校验
      if (reqInput.value.trim() === '') return;
      
      // 实时校验当前输入项
      let isValid = false;
      const inputName = reqInput.getAttribute("name");
      if (inputName === "email") {
        isValid = inputTest(emailTest, reqInput);
      } else if (inputName === "phone") {
        isValid = inputTest(onlyNums, reqInput) && reqInput.value.length >= 8;
      } else if (inputName === "name") {
        isValid = inputTest(onlyTextTest, reqInput);
      }

      // 校验不通过则添加错误提示
      if (!isValid) {
        formAddError(reqInput);
      }
    });
  });
};

可选优化 #

原有代码中reqInput.value.trim();仅执行了去空格操作但没有赋值给输入框，不会生效，可修改为reqInput.value = reqInput.value.trim();实现自动去除输入内容首尾空格。

内容的提问来源于stack exchange，提问作者Влад Лисовский