表单提交失败却无报错，主因是DOCTYPE前存在空格/BOM/注释触发Quirks Mode，导致submit事件不冒泡、checkValidity失效；IE9–10中required静默失效，需手动校验并添加视觉反馈；type="date"/"email"在旧版Safari和IE退化为text，须功能检测后加载polyfill；Firefox可能提交disabled控件，应移除name或提交前清空。

form提交失败却没报错，先查DOCTYPE和编码

表单在IE或旧版Edge里点提交没反应，控制台也安静如鸡？大概率是DOCTYPE前面混进了空格、BOM或注释，触发了Quirks Mode。这时候

的submit事件根本不会冒泡，checkValidity()返回true但实际不校验，连event.preventDefault()都可能失效。

• 用VS Code右下角确认文件编码是UTF-8 without BOM，不是UTF-8
• 光标移到第一行最左，按←键确认无隐形字符；删掉<!DOCTYPE html>前所有内容，包括<!-->、PHP输出的空白、甚至空行
• <form>标签必须显式声明accept-charset="UTF-8"，同时确保HTTP响应头含Content-Type: text/html; charset=UTF-8，且<meta charset="UTF-8">在<head>里靠前位置

required属性在IE9–10里静默失效

IE9–10识别required但不触发原生提示，也不渲染:invalid伪类，用户填空后点击提交，页面卡住，控制台零报错——这是IE对约束验证API的实现残缺，不是样式问题。

• 手动监听submit事件：form.addEventListener('submit', e => { if (!form.checkValidity()) { e.preventDefault(); } })
• 遍历所有required字段，检查el.value.trim() === ''，别依赖el.validity.valueMissing（IE9下恒为false）
• 给出视觉反馈：给空字段加is-error类，配合CSS显示红框或文字提示，别等浏览器自己来

type="date"/"email"在Safari和IE里退化成text

这不是bug，是标准行为。iOS Safari 15.6之前、IE全系列压根不认识这些type值，直接fallback到type="text"，连基础校验逻辑都丢了。强行用CSS修外观没用，DOM结构和事件机制已经不同。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 功能检测必须写实：执行const input = document.createElement('input'); input.type = 'date'; if (input.type === 'date') { /* 支持 */ }
• 不支持时加载轻量polyfill，比如flatpickr（仅date/datetime-local）或webshim（全量但体积大）
• polyfill后DOM结构变了，原来绑定在input[type=date]上的JS逻辑大概率失效，得监听初始化完成事件（如flatpickr的"onClose"）再操作

disabled表单控件在Firefox里意外提交

规范明确要求disabled控件**不参与提交**，但Firefox某些版本（尤其配合fieldset disabled或动态JS启用/禁用时）会把它们一起发出去，导致后端收到脏数据。

立即学习“前端免费学习笔记（深入）”；

• 禁用控件时，同步移除name属性：el.removeAttribute('name')，而不是只设disabled
• 若必须保留name（比如服务端依赖字段名），提交前手动过滤：Array.from(form.elements).filter(el => el.disabled).forEach(el => el.name = '')
• 避免对整个fieldset设disabled，改用JS逐个控制子元素，防止Firefox误判

表单兼容性最麻烦的地方不在“怎么修”，而在“什么时候修”——比如placeholder在iOS Safari旧版里光标错位，你调CSS没用，得用JS模拟；又比如pattern正则必须显式加^$锚点，否则Chrome能校验而Safari直接跳过。这些细节不跑真实环境根本发现不了。