本文讲解如何在纯 javascript（es6）环境下实现多步表单的分步验证，避免默认表单提交行为触发全表单校验，核心是为非提交按钮显式设置 `type="button"`。
在构建多步表单（multi-step form）时，一个常见痛点是：点击“下一步”按钮时，浏览器意外触发了整个 ，导致用户看到无关字段的错误提示（如红色边框、title 提示或 :invalid 伪类样式），严重影响体验。
问题根源在于：HTML 中未指定 type 属性的 。这意味着，即使你只调用 input.checkValidity() 验证当前 fieldset 内的输入项，点击按钮仍会尝试提交整个表单——从而触发浏览器对所有 required 字段（包括不可见的后续步骤）的强制校验。
✅ 正确解法非常简洁：为所有非提交用途的按钮（如“继续”“返回”）显式添加 type="button"。这能彻底阻止其触发表单提交与全局验证，使你的 checkValidity() 调用真正只作用于目标字段。
以下是优化后的完整实现（含关键注释）：
<form>
<!-- 第一步：姓名信息 -->
<fieldset>
<legend>Your name</legend>
<p>
<label for="prename">Prename (required)</label><br />
<input type="text" id="prename" name="prename" required />
</p>
<p>
<label for="surname">Surname (required)</label><br />
<input type="text" id="surname" name="surname" required />
</p>
<!-- ✅ 关键修复：添加 type="button" -->
<p><button type="button" onclick="continueToStep(2)">Continue</button></p>
</fieldset>
<!-- 第二步：联系方式 -->
<fieldset>
<legend>Your contact information</legend>
<p>
<label for="email">Email (required)</label><br />
<input type="email" id="email" name="email" required />
</p>
<p>
<label for="phone">Phone</label><br />
<input type="tel" id="phone" name="phone" />
</p>
<!-- ✅ 同样需声明 type="button" -->
<button type="button" onclick="goToStep(1)">Go back</button>
<!-- ✅ 提交按钮保留 type="submit"（默认值），用于最终校验 -->
<button type="submit">Submit</button>
</fieldset>
</form>配套 JavaScript 逻辑保持清晰高效：
let fieldsetElements;
function validateFieldset() {
// 仅选取当前可见（active）fieldset内的 input 元素
const inputs = document.querySelectorAll('fieldset.active input');
// 检查是否存在任一无效项；若全部有效则返回 true
return Array.from(inputs).every(input => input.checkValidity());
}
function goToStep(stepIndex) {
// 移除所有 active 类
fieldsetElements.forEach(fs => fs.classList.remove('active'));
// 仅激活目标 fieldset
fieldsetElements[stepIndex].classList.add('active');
}
function continueToStep(nextStepIndex) {
if (validateFieldset()) {
goToStep(nextStepIndex);
} else {
// 可选：聚焦首个无效字段，提升可访问性
const firstInvalid = document.querySelector('fieldset.active input:not(:valid)');
if (firstInvalid) firstInvalid.focus();
}
}
document.addEventListener('DOMContentLoaded', () => {
fieldsetElements = document.getElementsByTagName('fieldset');
goToStep(0); // 初始化显示第一步（索引 0）
});? 重要注意事项：
- ✅ type="button" 是语义化与功能正确的前提，不可省略；
- ✅ checkValidity() 本身不会触发 UI 错误提示（如气泡），但若元素已处于 :invalid 状态，样式可能仍存在——建议配合 reportValidity()（仅在必要时主动报告）或 CSS 重置（如 fieldset:not(.active) input:invalid { box-shadow: none; }）；
- ✅ 最终 type="submit" 按钮会校验整个表单，符合预期；如需最终也分步校验，可监听 submit 事件并 event.preventDefault()，再手动验证全部步骤；
- ✅ 为增强健壮性，推荐使用 Array.from(inputs).every(...) 替代 find(...) + 取反逻辑，语义更直观。
通过这一微小但关键的属性修正，你就能在不依赖任何框架的前提下，实现专业、可控、无障碍友好的多步表单分步验证体验。
