多步骤表单如何验证当前步骤字段

同理，“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