:valid伪类仅作用于带校验属性的单个表单控件，不适用于容器元素；实现容器整体校验需javascript聚合子字段checkvalidity()结果并手动切换class。
:valid-within 不存在，不是草案，也不是浏览器支持的特性。
你查不到它的文档、找不到它的 polyfill、调试器里也看不到它匹配任何元素——因为它压根没被标准化，也没被任何浏览器实现。所谓“草案”纯属误传，W3C 和 WHATWG 的公开规范中从未定义过这个伪类。
为什么 form:valid 或 .group:valid 完全不生效？
因为 :valid 只作用于单个表单控件（<input>、<select></select>、<textarea></textarea>），且仅当该元素自身带有校验属性（如 required、type="email"）时才可能切换状态。容器元素（<form></form>、<div class="group">）没有原生校验逻辑，浏览器不会为它们计算“内部全部有效”这个布尔值。
<h3>想让容器响应组内整体校验状态，必须用 JavaScript</h3>
<p>核心是手动聚合子字段的 <code>checkValidity() 结果，并控制容器 class：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 用
querySelectorAll('input, select, textarea')获取组内所有可验证字段 - 监听
input和blur事件（input提供实时反馈，blur补漏） - 每次触发时调用
el.checkValidity()，避免读el.validity.valid（后者不触发隐式验证） - 用
Array.from(inputs).every(el => el.checkValidity())判断整体是否通过 - 根据结果 toggle 容器的
group-valid类，CSS 写.group.group-valid { ... }
:valid/:invalid 本身就有延迟，别指望靠它“自动联动”
浏览器默认只在失焦或提交时更新 :valid 状态。即使你给每个 <input> 都加了 required 和 type="email"，它们的伪类也不会实时响应——除非你主动调用 checkValidity()。所以，所谓“监听容器状态”，底层还是得一个个字段去问，再汇总答案。
novalidate 就能绕开原生校验逻辑，其实它只禁用提交时的弹窗和默认行为，checkValidity() 和 :valid 状态照常工作。但如果你没给字段设校验属性，checkValidity() 永远返回 true，整个链路就断了。
