表单报错后保留输入，附可运行的 HTML 示例
表单只错了人数，改完以后，刚才填好的称呼和时段也应该还在。
附件做了一份完整的预约表单演示：提交时显示每项的文字错误，焦点移到第一处；改正某一项只更新这一项，不清空其他输入。还可以模拟一次提交失败，再用原来的内容重试。提交过程在本地演示，不调用真实预约接口。
先在浏览器里试一下
解压附件，进入材料目录，运行：
python -m http.server 8765 --bind 127.0.0.1在浏览器地址栏输入 127.0.0.1:8765。需要Python 3来启动这个本地服务器；表单本身是单文件HTML，没有第三方前端库。结束时在终端按Ctrl+C。
可以按这个顺序试，页面里的按钮叫“提交本地演示”：
- 先提交空表：显示三项文字错误，焦点到称呼。
- 称呼填虚构的“小禾”，时段选下午，人数填6：提交后只需改人数，称呼和时段还在。
- 人数改成2，勾选“模拟本次提交失败”再提交：出现整次提交失败的提示，三项输入保留。
- 取消勾选，再提交：显示本地演示确认，无须重新填写。
- 把人数改成3：上一条成功确认消失，需要重新提交。
这些输入只留在当前页面，刷新页面会丢失演示输入。
看到本地确认以后，再改一个字段，旧确认会清掉，避免把上一份内容的“成功”套到新内容上。
错误信息跟字段放在一起
每项都有可见标签。错误不只是边框变红，还写出原因，并通过 aria-describedby 与相应输入关联；有错误的字段设置 aria-invalid。本次验证检查这些关联和实际焦点；读屏工具的表现没有在本次验证。
人数项的关联如下，提交和修改时由脚本更新错误文字及 aria-invalid：
<label for="people">人数（必填）</label>
<input id="people" name="people" type="text" inputmode="numeric"
required aria-invalid="false"
aria-describedby="peopleHint peopleError">
<p id="peopleHint">填写 1–5 的整数，不接受小数。</p>
<p id="peopleError" hidden></p>这个示例选择关闭浏览器默认的提交校验气泡，用一套自定义文字错误处理校验和焦点。表单校验失败时不调用 form.reset()；本地模拟提交失败也保留字段值。输入规则需要在一个地方写清楚，再由字段提示与错误信息共同表达。
称呼去除两端空格后不能为空；人数去除两端空格后只接受单个ASCII字符1–5，6、0、2.5、02或全角数字不会通过。inputmode="numeric" 只是键盘提示，不负责实现这条规则。时段必须是列表中的上午、下午或晚间。
让AI改现有表单时，把这些状态一起交代
可以把现有HTML和这段要求一起发给它：
请修改这份表单的错误恢复，保留现有字段含义和视觉风格，给出完整可运行HTML。
每个字段有正确关联的可见label，错误用就近的文字说明，不只改变颜色。
错误文字通过aria-describedby关联到字段；错误字段设置aria-invalid，改正后清除错误状态。
提交校验失败时阻止提交，并把焦点移到第一个有错的字段。
只修改一个字段时，不清空或改写其他字段的值；不要用form.reset()处理校验或提交失败。
提交失败后保留输入，并明确区分字段错误和整次提交错误。
成功后若用户再次编辑，立即清掉旧成功确认，不继续显示上一份输入已经成功。
本地演示时明确标示演示结果；接真实接口时，以服务端返回结果处理成功与失败。
用浏览器实际验证空表、多项错误、逐项改正、失败保留、重试成功和再次编辑。
没运行过的浏览器或辅助技术不要写成已验证。真实业务仍要在服务端校验输入；本地校验通过，只说明满足了这份页面的规则。这里的成功确认也只是本地演示状态，不表示已经创建预约。
本地实际用Chromium 154.0.8037.57、Playwright 1.62.0跑了32项检查，覆盖空表、空白称呼、人数边界与错误写法、首错焦点、字段值保留、模拟失败、重试成功、修改后清旧确认、键盘操作和390px布局。最终ZIP已在新目录独立解压，用本地HTTP重新运行，32项均通过；三张截图对应实际固定样例。
若要复跑自动检查，按README准备Playwright和Chromium，再运行 python verify.py --browser /usr/bin/chromium；这是本次Linux环境所用的浏览器路径。脚本会更新验证记录和截图，验证的是这个本地原型。
下载完整HTML、提示词、浏览器验收脚本、三张真实截图和验证记录（ZIP，9个文件）
参考：WAI表单错误通知指南、MDN约束验证文档，2026-10-25查阅。