javascript - 如何使用原生 HTML5 约束 API 验证单选组是否具有选择

Question

MDN page on radio buttons状态:

Validation. Radio buttons don't participate in constraint validation; they have no real value to be constrained.

但这不是真的。作为一个群体，他们经常需要得到验证——例如如果没有选中默认值，但用户必须选中其中一个选项才能继续。这是通常需要的用户体验，以防止用户在没有做出主动选择的情况下提交表单。

我发现有一个RadioNodeList ，它没有提到验证，但这似乎也没有“willValidate()”方法。我希望能够设置 required我知道它不是 HTML 元素，但如果在 JS 中完成，理论上可以提供 native UX。

我想知道将所选值复制到隐藏或文本字段并将该字段设置为 required但用户界面可能会令人困惑。

我知道我可以使用 JS、JQ 等，但我一直无法找到验证单选组的 native 方法。

有原生的方式吗？

<小时/>

更新:使用 required 可以按预期工作属性 - 刚刚在 Safari、Chrome 和 Firefox 中进行了测试。我没有看到它的原因是 data-close提交按钮上的属性，在看到 native 验证提示之前隐藏了表单。 MDN 文档误导我认为该字段根本不支持验证，而它更具体地关注约束 API。

Answer 1

只需在具有相同 name 属性的一组单选按钮中的任意单选按钮上设置 required 即可。浏览器将强制选择一个单选按钮。您可能还应该在每个单选按钮上设置 required ，只是为了便于阅读。但效果是一样的。

例如

<form>
  <label for="radio1">
    <input id="radio1" type="radio" name="groupname" required>
    First radio button
  </label>
  <br>
  <label for="radio2">
    <input id="radio2" type="radio" name="groupname">
    Second radio button
  </label>
  <br>
  <input type="submit">
</form>