表单验证使用previousElementSibling读取classList报错该如何解决？

问题原因 #

原有验证逻辑依赖输入框和提示span直接相邻的DOM结构，密码输入框外层嵌套了.input-group容器，直接调用previousElementSibling获取到的是输入框同级的前置图标容器，而非目标提示span，因此触发了读取null属性的报错。

解决方案（无需修改原有HTML结构） #

调整JS逻辑，通过公共父容器.form-group查找对应提示元素，完全不受输入框外层嵌套层级的影响：

function formvalidity1(e) {
  e.preventDefault();
  var inputs = document.getElementsByTagName("input");
  for (let i = 0; i < inputs.length; i++) {
    // 向上查找当前输入框所属的表单组容器
    const formGroup = inputs[i].closest('.form-group');
    // 查找当前表单组下的错误提示元素
    const errorTip = formGroup.querySelector('.text-danger');
    if (!inputs[i].value) {
      errorTip.classList.remove("d-none");
      // 兼容不同浏览器的滚动置顶逻辑
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    } else {
      errorTip.classList.add("d-none");
    }
  }
}

逻辑说明 #

• closest('.form-group')会向上递归查找最近的匹配类名的父元素，无论输入框外层包了多少层容器都能正确定位到同组表单容器
• querySelector('.text-danger')查找当前表单组下的错误提示，和输入框的位置没有强绑定，后续调整输入框嵌套结构也不会影响验证逻辑

高扩展性可选优化方案 #

如果后续表单会新增其他红色文字元素，可通过自定义属性关联输入框和对应提示，逻辑更精准，不会出现误匹配：

1. HTML调整示例：

<!-- 给所有错误提示加统一类名 -->
<span id="alert5" class="d-none text-danger form-error-tip">Password is required</span>
<!-- 给输入框加属性关联对应提示的ID -->
<input type="password" id="psd" class="form-control" data-error-tip="alert5">

2. 对应JS逻辑：

function formvalidity1(e) {
  e.preventDefault();
  var inputs = document.getElementsByTagName("input");
  for (let i = 0; i < inputs.length; i++) {
    const tipId = inputs[i].dataset.errorTip;
    const errorTip = document.getElementById(tipId);
    if (!inputs[i].value) {
      errorTip?.classList.remove("d-none");
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    } else {
      errorTip?.classList.add("d-none");
    }
  }
}

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