如何使用原生HTML5约束API验证单选按钮组已选中选项？

好消息——其实浏览器原生就支持单选按钮组的必填验证，你之前遇到的问题主要是两个小误会：

1. 正确用法：给组内单选按钮加required属性 #

只要给同一个name的单选按钮组里至少一个选项加上required属性，整个组就会被标记为必填项——用户必须选中其中一个才能提交表单，浏览器会自动弹出原生验证提示，完全不需要额外写JS逻辑。

举个简单的示例：

<form>
  <label>
    <input type="radio" name="payment" value="credit" required>
    信用卡
  </label>
  <label>
    <input type="radio" name="payment" value="paypal">
    PayPal
  </label>
  <label>
    <input type="radio" name="payment" value="cash">
    现金
  </label>
  <button type="submit">确认提交</button>
</form>

这里只要组内有一个单选按钮带required，浏览器就会验证整个组是否有选中项，没选的话会阻止提交并提示用户。

2. 关于MDN文档的误导 #

你看到的那段MDN描述确实容易让人误解——它说“单选按钮不参与约束验证；它们没有需要约束的实际值”，但准确的意思是单个单选按钮本身没有独立的输入值需要约束，但作为一组时，通过required属性可以将“组内必须有选中项”作为验证条件，这其实是约束验证API的一部分，只是文档表述没覆盖这个场景。

3. 你之前没看到效果的原因 #

问题出在提交按钮的data-close属性上——它在浏览器原生验证提示弹出之前就隐藏了表单，打断了验证流程。只要调整这个逻辑（比如让关闭操作只在表单验证通过后执行），就能正常看到原生的验证提示了。

额外说明 #

至于你提到的RadioNodeList，它确实没有专门的验证方法，但这不影响原生表单验证的工作——浏览器会自动识别同name的单选按钮组，并根据required属性完成验证，不需要你手动操作这个对象。也完全没必要折腾隐藏字段这类 workaround，原生required已经能完美满足“必须选一个”的UX需求，你测试的Chrome、Firefox、Safari都支持这个特性。

内容的提问来源于stack exchange，提问作者scipilot