如何使用原生 HTML5 约束 API 验证单选组是不是有选择 [重复]

Posted 2023-03-05

【中文标题】如何使用原生 HTML5 约束 API 验证单选组是不是有选择 [重复]

【英文标题】：How to validate a radio group has a selection using native HTML5 constraint API [duplicate]如何使用原生 HTML5 约束 API 验证单选组是否有选择 [重复]

【发布时间】：2018-11-05 08:49:14

【问题描述】：

MDN page on radio buttons 声明：

验证。 单选按钮不参与约束验证；它们没有真正的价值可以被限制。

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

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

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

我知道我可以使用 JS、JQ 等，但我还没有找到验证无线电组的本地方法。

有原生方式吗？

---

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

【问题讨论】：

严格来说这不是重复的。虽然我不再关心了，因为required 属性已经解决了我的问题，但是对于如何将Contraint API 与radio 元素或父节点列表一起使用仍然没有答案。

【参考方案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>

【讨论】：

是的，这是正确的。我已经尝试过了，但由于模式对话框在提交时立即关闭，即使表单没有提交，它也没有显示。所以 MDN 文档是错误的。

@scipilot 这是复杂代码库的问题。是的，那个页面一定很旧了。

实际上，经过反思，MDN 页面是正确的，但令人困惑。 radio 元素不支持 Constraint API。但这并不意味着它不支持“必需”属性，也不支持一般的验证。这只意味着它没有willValidate 方法。

好的，是的，它确实可以作为收音机的属性使用。 ...所以无线电的 MDN 文档是错误的！它确实支持 API。

或许是的。我打算使用 API 来打开表单的模态对话框。但我只是做错了。无论哪种方式，您的答案都是相同的正确解决方案。

【参考方案2】：

在任何单选按钮或所有单选按钮上设置required 将使单选按钮组按需要进行。查看 w3.org 链接

https://www.w3.org/TR/html5/forms.html#example-27c46ff8