radio组验证失败时浏览器不提示，因HTML原生required仅检查同name下是否有任意radio被选中，若存在隐藏且checked的radio则直接跳过校验；Layui需显式设置lay-verify并调用form.render('radio')才能生效。
radio组验证失败时浏览器不提示？先确认required是否真生效
HTML原生required对radio组的校验逻辑很特殊：它只检查“同name下是否有任意一个radio被选中”，而不是“用户是否点过可见选项”。如果组里混入了隐藏且checked的radio（比如<input type="radio" name="q1" value="" style="display:none;" checked>），浏览器会直接认为该字段已填，跳过验证——此时提交无提示、无高亮，表单照常发出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查所有同name的radio，确认没有隐藏+
checked项 - 确保至少一个可见radio有
value（不能是空字符串value=""） - 移除所有
style="display:none"或visibility:hidden的radio，改用aria-hidden="true"+tabindex="-1"隐藏语义元素（如占位说明）
Layui中radio不触发验证？重点查name和lay-verify
Layui不会自动把同name的radio识别为一组，除非你显式告诉它。它只认DOM初始加载时的name值，且必须完全一致（大小写、空格、拼写都不能差）。哪怕JS动态加了一个name="gender"，只要没调form.render('radio')，验证就永远不绑定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在任意一个radio上加
lay-verify="required"（只需一个，别每个都加） - 用
console.log(form.val('yourFormName'))确认取到的值不是undefined或空串 - 动态插入后立刻执行
form.render('radio')，不要放在setTimeout外层或异步回调之前 - 避免写
required=""——Layui不读这个HTML5原生属性
自定义提示文案和位置，别依赖:invalid伪类
:invalid伪类对radio组基本无效：它只作用于单个input元素，而radio组的“无效”是逻辑层面的组状态，浏览器不会给整组打上:invalid。想精准控制提示文案和显示位置，必须手动接管。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在radio组容器后紧跟一个
<div class="radio-error"></div>，用aria-live="polite"保证读屏器可感知 - 提交时用
form.checkValidity()配合event.preventDefault()，再手动设置提示文本：errorEl.textContent = "请选择性别"; errorEl.style.display = "block"; - 清空错误时，除了设
textContent = ""，还要移除aria-invalid="true"和CSS错误类（如error） - 焦点处理别直接
radio.focus()，改用label[for="xxx"].focus()，更符合用户操作预期
为什么setCustomValidity()对radio组没反应
setCustomValidity()只能作用于单个<input>元素，而radio组的校验主体是“name相同的一组”，不是某个具体radio。你对某个radio调用setCustomValidity("请选")，只会影响那个元素自身的validity状态，但提交时浏览器仍按组逻辑判断——结果就是调了等于没调。
真正可行的做法是：监听submit事件，在里面遍历同name的所有radio，用el.checked判断是否全未选，再统一控制提示元素显隐和aria-invalid属性。复杂点在于：radio组没有“整体validity API”，所有状态必须手动聚合计算。
