本文详解因 html 中多个元素使用相同 id（如 mce-email）引发的表单验证异常问题，说明其原理、复现逻辑及彻底解决方案，并提供可直接落地的修复代码与最佳实践建议。
在您提供的 Mailchimp 表单代码中，“Primary school teacher” 和 “Headteacher” 两个条件区块均使用了完全相同的 id=”mce-EMAIL”：
这违反了 HTML 规范的核心原则：id 属性必须在整个文档中唯一。当 JavaScript（如 Mailchimp 的 mc-validate.js）执行表单验证时，会调用类似 document.getElementById(‘mce-EMAIL’) 的方法获取该字段值——而浏览器只返回 DOM 中第一个匹配的元素（即“Primary school teacher”区块中的输入框），后续区块中的同名 id 元素将被忽略。
因此，当用户选择 “Headteacher” 时：
- 对应的邮箱输入框实际被渲染，但其 id=”mce-EMAIL” 与上方已存在的元素冲突；
- 验证脚本始终读取“Primary school teacher”区块中那个（此时 display: none）的输入框；
- 该隐藏输入框 value=””，故触发 “Please enter a value” 错误，即使用户已在 Headteacher 区块中正确填写。
✅ 正确解决方案：为每个条件区块分配唯一 ID
需为不同角色的邮箱字段设置语义化、唯一的 id 和 for 属性，同时确保关联
立即学习“前端免费学习笔记（深入）”；
