如何在多步骤表单中仅验证当前步骤的字段集

本文详解如何使用原生 javascript（es6）实现多步骤表单中按字段集（fieldset）粒度进行独立验证，避免默认表单提交行为触发全表单校验，并通过设置 `type=”button”` 阻止非提交按钮触发验证。

在构建多步骤表单时，一个常见误区是：即使只调用 checkValidity() 验证部分输入元素，整个

。根本原因在于：html 中未显式声明 type 的 元素默认为 type=”submit” —— 点击它会触发表单原生验证（包括所有 required 字段），导致尚未展示的第二步字段也提前报错。

✅ 正确做法：显式声明按钮类型

只需为所有非提交用途的按钮（如“continue”、“go back”）添加 type=”button” 属性，即可彻底隔离验证范围：

Continue   Continue

同理，“Go back” 按钮也需添加 type=”button”，而最终提交按钮保留 type=”submit” 即可。

✅ 验证逻辑优化建议

你当前的 validateFieldset() 函数逻辑正确（筛选 .active fieldset 内的 input 并逐个调用 checkValidity()），但可进一步提升健壮性与可读性：

function validateFieldset() {   const activeFieldset = document.querySelector('fieldset.active');   if (!activeFieldset) return false;    const inputs = activeFieldset.querySelectorAll('input');   return Array.from(inputs).every(input => input.checkValidity()); }

• 使用 querySelector(‘fieldset.active’) 替代 querySelectorAll + 过滤，更高效；
• every() 比 find() + 取反语义更清晰，且短路执行（遇到首个无效即返回 false）；
• 无需传参 step，直接依赖 dom 状态，降低耦合。

⚠️ 注意事项

• 不要移除 required 属性：它是语义化和无障碍访问的基础，仅需控制验证触发时机；
• 手动显示/隐藏错误提示：checkValidity() 仅返回布尔值，若需高亮错误字段或显示 title 提示，可结合 reportValidity()（但注意它会全局触发提示）—— 推荐自行实现 UI 反馈（如添加 .invalid 类）；
• 禁用原生 tooltip？ 若想完全自定义错误提示，可在验证前调用 element.setCustomValidity(”) 清除默认消息，再用 js 控制 UI；
• 表单提交时仍需全量验证：最后的 type=”submit” 按钮会自然校验所有 required 字段，符合预期，无需额外干预。

✅ 完整修复后关键代码片段

   
     
Your name
     
       Prename (required)            
     
       Surname (required)            
          Continue   
    
     
Your contact information
     
       Email (required)            
     
       Phone            
          Go back          Submit   
 

通过这一微小但关键的属性修正，配合清晰的 DOM 状态驱动验证逻辑，即可实现真正按步骤解耦的表单验证体验——专业、轻量、零依赖。