使用HTML、Bootstrap和JavaScript开发多页表单：如何高效获取所有必填字段并解决嵌套节点遍历失效问题

看起来你在处理多页表单的章节验证时，遇到了嵌套节点下必填字段无法被正确检测的问题——手动遍历直接子节点的方式确实没法处理深层嵌套的情况，这里有几个更简洁高效的解决方案：

方法一：用CSS选择器直接定位（最推荐） #

浏览器的DOM API自带强大的选择器引擎，querySelectorAll可以直接抓取目标章节内所有带required属性的表单元素，不管嵌套层级有多深都能轻松搞定：

// 获取目标章节内所有必填字段
function getRequiredFields(sectionNumber) {
  const section = document.getElementById(`form_section_${sectionNumber}`);
  // 选择章节内所有带required属性的表单元素（input/select/textarea等都覆盖）
  const requiredFields = section.querySelectorAll('[required]');
  // 转换为数组方便后续操作
  return Array.from(requiredFields);
}

// 验证章节有效性的示例函数
function validateSection(sectionNumber) {
  const requiredFields = getRequiredFields(sectionNumber);
  let isValid = true;

  requiredFields.forEach(field => {
    // 用HTML5原生方法检查字段有效性
    if (!field.checkValidity()) {
      isValid = false;
      // 这里可以添加自定义错误提示，比如给字段加高亮样式
      field.classList.add('is-invalid');
    } else {
      field.classList.remove('is-invalid');
    }
  });

  return isValid;
}

这个方法的优势： #

• 高效简洁：querySelectorAll是浏览器优化过的底层实现，比手动递归遍历节点快得多
• 全覆盖嵌套：不管字段藏在多少层div嵌套里，只要在目标章节范围内，就能被精准选中
• 灵活扩展：可以通过修改选择器（比如input[required], select[required]）来筛选特定类型的表单元素

方法二：利用HTML5原生表单验证能力 #

如果你想更贴近原生表单的验证逻辑，可以直接遍历章节内的所有表单控件，只检查带required属性的元素：

function validateSection(sectionNumber) {
  const section = document.getElementById(`form_section_${sectionNumber}`);
  // 获取章节内所有表单控件
  const allControls = section.querySelectorAll('input, select, textarea');
  let isValid = true;

  allControls.forEach(control => {
    // 仅验证带required属性的控件
    if (control.hasAttribute('required') && !control.checkValidity()) {
      isValid = false;
      // 触发浏览器原生的错误提示弹窗
      control.reportValidity();
    }
  });

  return isValid;
}

关于你原有代码的问题说明 #

你之前的代码只遍历了章节的直接子节点，没有递归处理深层嵌套的子元素，这才导致深层的必填字段被遗漏。而上述两种方法都能自动遍历所有后代节点，完美解决这个问题。

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