JavaScript 多步表单验证引导、HTML、CSS？

Question

我正在尝试使用 JavaScript 和 div 创建一个多步表单。我知道如何以这种方式创建表单，但问题是我希望在移动到下一步之前验证每个步骤中的字段。示例：如果用户未填写必填字段或字段中有错误，则该框将以红色突出显示，并且在更正之前不会进入下一步。我知道如何进行验证，但无法停止页面。任何帮助将不胜感激。

Answer 1

1. 使用constraint validation 对您的输入元素进行验证
2. 监听onsubmit 何时在表单元素和prevent the default behavior 上被触发。 （它只会在表单有效时触发，而不是在无效时触发，因此不需要 javascript 验证）。 不要听button or input[type="submit"]点击事件，许多开发者养成了使用的错误习惯。否则，约束验证消息不会启动
3. 隐藏表单/部分，并显示下一步

globalThis.onsubmit = evt => {
  evt.preventDefault()
  const submittedForm = new FormData(evt.srcElement)
  console.log([...submittedForm])
  evt.srcElement.hidden = true
  evt.srcElement.nextElementSibling.hidden = false
}

<form>
  <input required placeholder="First name" name="given-name" autocomplete="given-name">
  <input type="submit">
</form>
<form hidden>
  <input required placeholder="Last name" name="family-name" autocomplete="family-name">
  <input type="submit">
</form>