不要在 HTML 表单中嵌套表单

  •  2018-05-19
  • #HTML
  •  2018-05-19 21:09:11

不要在 HTML 表单中嵌套表单,也就是在 form 中嵌套 form!

起因

我在做博客分类功能时,想用 bootstrap modal 做一个弹窗表单,再用 Ajax 提交请求新建分类。很自然很简单的想法,却掉进了一个坑。每次提交 post 请求,laravel 都返回了 419 错误(很内涵的错误码),这一般是由于 csrf token 验证失败引起的。检查后发现,岂止 csrf token,表单数据完全没有,空白的。
检查弹出的 modal 时,发现 form 元素不见了,form 内部的元素都在,form 这个壳子不见了。

解决

搜了一圈,开始以为是 bootstrap modal 的问题,或者和其他 js 组件冲突,然而删减了其他部分的代码,把 modal 代码直接换成官方提供的示例,问题仍然存在。
换组件是不不可能换组件的,这辈子不可能换的,又不会自己写 js ,只有用 bootstrap+jQuery,才能勉强写写前端的样子。
后来偶然想起,这个 modal 包括触发它的按钮,都是包含在另一个大的 form 里面的,会不会是表单嵌套造成的原因?试了下果然如此,写俩个嵌套的表单,在谷歌浏览器里面只剩了一个 = =。
不要在表单里嵌套表单,一切都起源于这条简单合理的HTML 规范,回过头才发现自己犯了个这么低级的错误。
解决方法也很简单,把 modal 代码切出来丢到表单外就完事了。