原生 required 属性对同 name 的 radio 组有效，校验是否至少选中一个；name 不一致、fieldset disabled、js 动态修改或旧 webview 兼容性差会导致校验失效。

单选框必须选中一个才能提交

原生 required 属性对 <input type="radio"> 有效，但前提是同一组 radio 必须共享相同的 name，且至少有一个选项存在（哪怕没设 checked）。浏览器只校验“该组是否有任意一个被选中”，不关心具体值是否为空字符串。

• 必须为所有同组 radio 设置完全一致的 name 值，例如 name="gender"；不同 name 视为不同组，各自独立校验
• 无需给任一 radio 加 checked —— 缺省状态就是“未选中”，此时提交会触发校验失败
• 即使所有 radio 的 value 都是空字符串（value=""），只要有一个被点选，校验即通过
• 不要用 disabled 禁用某个 radio，它会被跳过校验，但用户也无法选择，容易造成逻辑断裂

为什么点了单选框还提示“请填写此字段”

常见原因不是 radio 本身问题，而是 HTML 结构或属性干扰了浏览器识别：

• name 值拼写不一致（比如大小写混用、多空格、前后缀差异），导致浏览器认为它们不属于同一组
• radio 被包裹在 <fieldset disabled></fieldset> 中，整个字段集被禁用，表单控件不参与验证和提交
• 使用了 JavaScript 动态移除/重写 radio 元素，但未同步更新 name 或未触发浏览器重新解析表单约束
• 部分旧版 Android WebView 对 required + radio 支持不全，首次点击后不弹提示，需手动调用 checkValidity()

自定义错误提示文案要小心 setCustomValidity 的残留

radio 不像 <select></select> 或 <input> 那样有明确的“输入事件流”，所以不能依赖 oninput 清空错误。正确做法是监听 change 事件：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

基础版 专业版 提交

<script> const radios = document.querySelectorAll('input[name="plan"]'); radios.forEach(radio => { radio.addEventListener('change', () => { // 只清空当前组的自定义错误（如果有） const form = radio.form; if (form) form.checkValidity(); // 强制刷新验证状态 }); }); document.getElementById('myForm').addEventListener('submit', (e) => { if (!e.target.checkValidity()) { e.preventDefault(); // 可在此处统一处理错误 UI，比如聚焦第一个未选 radio radios[0].focus(); } }); </script>

注意：不要在每个 radio 上单独调用 setCustomValidity()，因为浏览器只认整个 name 组的验证状态；真正需要干预的是表单级的提交拦截与反馈逻辑。

移动端 Safari 和 WebView 的兼容性坑

iOS 15+ 和较新 Android WebView 基本支持 required + radio，但仍有两个现实问题：

• 原生错误提示可能不显示，或只闪一下，用户感知弱 —— 建议配合 CSS :invalid 伪类加红边框，或用 JS 主动插入提示文案
• 如果页面用 formnovalidate 提交过一次，后续再启用验证时，某些 WebView 不会自动恢复校验行为，需手动重置表单或重建 radio 节点

最稳妥的做法是：把 required 当作基础兜底，关键业务逻辑仍以 JS checkValidity() + 显式提示为主，别完全依赖浏览器弹窗。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！