如何重置内置 HTML 输入有效性

Question

至少在 Firefox 中，原生 HTML5 输入元素的有效性，例如required 文本字段，显示为红色边框，但仅在交互之后。

例如在下面的示例中，我最初看到两个输入框。如果我在其中一个中输入内容，将其删除并按 Tab，第一个现在会发出红光，表明它无效（因为它是必需的）。

使用 Javascript，如何将表单重置为未显示红色边框的原始初始状态？

<form action='#'>
  <div>
    <input required name="a" type="text"   />
    <input required name="b" />
  </div>
</form>

Answer 1

我发现唯一可靠的方法是通过<button type="reset"> 或form.reset() 重置表单。

但是请注意，这将擦除表单中所有字段的值，因此如果您需要保留这些值，则需要在重置完成后重新填充它们的值。

设置<form novalidate> 将起作用，但随后删除novalidate 属性将使字段再次显示错误。