多同class输入框表单数字验证：错误提示显示的正确JS语法

原代码的核心问题 #

1. 类选择器语法错误：document.querySelector("showError")缺少类选择器前缀.，且要选中所有符合类的元素，需用querySelectorAll而非querySelector
2. 遍历逻辑错误：sError.forEach((showError))写法完全不符合语法规范，正确方式是对NodeList调用forEach并传入处理函数
3. 事件监听错误：表单应监听submit事件而非click，否则点击表单内任意元素都会触发验证
4. 验证逻辑缺失：仅判断输入是否为空，未校验内容是否为数字

正确实现代码 #

HTML（假设每个数字输入框对应一个错误提示）

<form id="SubmissionForm">
  <input type="text" id="input1" placeholder="请输入数字">
  <span role="alert" class="showError" aria-hidden="true">请输入有效数字</span>
  
  <input type="text" id="input2" placeholder="请输入数字">
  <span role="alert" class="showError" aria-hidden="true">请输入有效数字</span>
  
  <input type="text" id="input3" placeholder="请输入数字">
  <span role="alert" class="showError" aria-hidden="true">请输入有效数字</span>
  
  <button type="submit">提交</button>
</form>

JavaScript

const formE = document.getElementById("SubmissionForm");
// 获取所有需要验证的数字输入框
const numberInputs = document.querySelectorAll('#input1, #input2, #input3');

formE.addEventListener("submit", validate);

function validate(e) {
  e.preventDefault();
  let valid = true;

  // 先重置所有错误提示和输入框状态
  document.querySelectorAll('.showError').forEach(errorEl => {
    errorEl.setAttribute("aria-hidden", true);
  });
  numberInputs.forEach(input => {
    input.setAttribute("aria-invalid", false);
  });

  // 逐个验证数字输入框
  numberInputs.forEach((input, index) => {
    const value = input.value.trim();
    // 判断是否为有效数字（支持整数、小数）
    const isValidNumber = !isNaN(parseFloat(value)) && isFinite(value);
    
    if (!value || !isValidNumber) {
      valid = false;
      // 获取对应输入框的错误提示（这里假设结构是输入框紧跟错误提示）
      const errorEl = input.nextElementSibling;
      // 若错误提示位置不固定，也可通过索引获取：
      // const errorEls = document.querySelectorAll('.showError');
      // const errorEl = errorEls[index];
      
      errorEl.setAttribute("aria-hidden", false);
      input.setAttribute("aria-invalid", true);
    }
  });

  if (valid) {
    // 验证通过，执行表单提交
    formE.submit();
  }
}

关键语法说明 #

• 获取所有错误提示元素：document.querySelectorAll('.showError')返回包含所有类为showError的元素的NodeList，可直接用forEach遍历
• 显示错误提示：通过设置aria-hidden="false"，配合CSS（通常写.showError[aria-hidden="true"] { display: none; }）实现显示/隐藏，同时满足无障碍访问要求
• 数字验证逻辑：!isNaN(parseFloat(value)) && isFinite(value)能准确判断输入是否为有效数字；若仅需整数，可改用正则：/^-?\d+$/.test(value)

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