实现HTML表单提交前的必填项高亮提醒_利用input-required伪类样式-html教程-PHP中文网

:invalid 和 :user-invalid 伪类可实现必填项空值高亮，但需配合 :not(:placeholder-shown) 及 javascript 触发校验；纯 css 无法绕过用户交互前提，推荐组合使用并兼容旧浏览器。

实现html表单提交前的必填项高亮提醒_利用input-required伪类样式

required 伪类本身不触发高亮，得靠 :invalid 或 JavaScript 检测

浏览器不会仅因 required 属性就自动给元素加视觉反馈；:required 伪类只匹配有 required 属性的元素，但它不表示“当前未填”或“校验失败”。真正能反映必填项空状态的是 :invalid —— 它在字段为空且标记为 required 时自动生效（前提是表单未提交过）。

但注意：刚加载页面时，:invalid 默认不会激活（因为用户还没交互），所以首次打开表单看不到高亮。这是常见困惑点。

:invalid 在用户聚焦后又失焦（blur）、或提交表单失败后，才会稳定触发
若想“一进页面就高亮所有空必填项”，必须用 JavaScript 主动触发表单校验，例如调用 form.reportValidity()
仅靠 CSS 无法绕过这个交互前提；纯样式方案只能响应用户行为后的状态

用 :invalid + :user-invalid 实现更可靠的空值高亮

:user-invalid 是较新标准（Chrome 102+、Firefox 119+、Safari 16.4+ 支持），它比 :invalid 更精准：只在用户与字段交互过（输入、聚焦/失焦、粘贴等）且校验失败时才匹配。避免了 :invalid 在初始加载或未操作时误触发的问题。

推荐组合写法：

input:required:invalid:not(:placeholder-shown),
input:required:user-invalid {
  border-color: #e74c3c;
  outline: 2px solid #f8d7da;
}

:not(:placeholder-shown) 排除 placeholder 还在显示的场景（防止 placeholder 存在时误判为空）
对 textarea 和 select 需单独补充规则，它们不支持 :placeholder-shown
旧浏览器不支持 :user-invalid 时，回退到 :invalid 即可，不影响功能，只是初始状态略保守

submit 事件中阻止默认行为并手动高亮所有 required 字段

当用户点击提交但校验失败时，submit 事件里调用 event.preventDefault() 后，可以遍历所有 required 字段，主动添加 class 或设置 style，确保视觉反馈明确。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

关键点不是“阻止提交”，而是“让所有必填项立刻可感知”：

用 form.querySelectorAll('input[required], select[required], textarea[required]') 找出全部必填控件
对每个元素检查 !element.value.trim()（注意 select 要查 selectedIndex === 0 且其首个 option 无 value 或 value=""）
添加临时 class 如 is-missing，配合 CSS 设置边框/背景色，比依赖伪类更可控
别忘了在用户开始输入后移除该 class，否则会干扰后续校验

移动端 focus 时键盘弹出导致滚动错位，高亮样式被遮挡

在 iOS Safari 或部分安卓浏览器中，给空的 input 添加红色边框后立即 focus()，键盘弹出会触发页面滚动，常把高亮字段滚到视口外——用户根本看不到提示。

解决思路不是禁用 focus，而是延迟或条件触发：

不在 submit 处理中直接 input.focus()，改用 scrollIntoView({ behavior: 'smooth', block: 'center' }) 定位第一个缺失字段
对 input 做 focus 前加 setTimeout(() => el.focus(), 300)，等键盘动画启动后再聚焦，减少错位
CSS 上给表单容器加 scroll-margin-top: 20px，让 scrollIntoView 留出顶部安全距离