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

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

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

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

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

Continue


Continue

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

CA.LA

第一款时尚产品在线设计平台，服装设计系统

下载

✅ 验证逻辑优化建议

你当前的 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 状态驱动验证逻辑，即可实现真正按步骤解耦的表单验证体验——专业、轻量、零依赖。