本文详解因 html 中 id 属性重复（多个元素共用 id=”mce-email”）引发的表单验证异常问题，并提供可立即落地的修复方案，包括唯一 id 命名、javascript 动态绑定及 mailchimp 兼容性处理。
在您提供的 Mailchimp 嵌入式表单代码中，两个条件显示区块（Primary school teacher 和 Headteacher）均使用了完全相同的 id=”mce-EMAIL”：
这是违反 HTML 规范的根本性错误。根据 HTML 标准，id 属性在整个文档中必须唯一。当 JavaScript（如 Mailchimp 的 mc-validate.js）执行 document.getElementById(‘mce-EMAIL’) 时，浏览器仅返回第一个匹配元素（即 Primary school teacher 区块中的输入框），而忽略后续同名 ID。因此：
- 当用户选择 Headteacher 时，实际被验证的是隐藏的 Primary school teacher 区块中的 （此时 display: none，但 DOM 仍存在且 value 为空）；
- 浏览器原生 required 验证和 Mailchimp 的 JS 验证均读取该“幽灵”空值 → 触发 “Please enter a value” 错误。
✅ 正确修复方案（三步到位）
1. 为每个邮箱字段分配唯一 ID
修改两处 id 和对应 label[for]，确保语义与 DOM 一一对应：
⚠️ 注意：name=”EMAIL” 可保持不变（后端接收字段名），但 id 和 label[for] 必须唯一且配对。
2. 更新 Mailchimp 字段映射（关键！）
Mailchimp 的验证脚本依赖 window.fnames 显式声明字段 ID。默认脚本中：
立即学习“前端免费学习笔记（深入）”；
