Google Chrome无法使用display：none提交表单

Question

除非我从style="display:none" div中删除template=row，否则此表单上的“提交”按钮不会执行任何操作。为什么？

（每个表单控件的name由javascript动态填充，但是，为了简化故障排除，我运行了没有javascript的表单，问题归结为是否{{1} }标签就在那里。

这是Chrome控制台所说的：

display

HTML：

bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable

Answer 1

原因似乎是HTML 5 constraint validation - 它是require属性。 Chrome已经开始支持它的最新版本。

显然这似乎是backward compatibility issue，但您可以通过为提交按钮设置formnovalidate属性来解决此问题。

我认为这实际上是一种安全功能，可以阻止通过提交被操纵的隐藏内容来提交假定的用户数据，此引用指向该方向：

  

如果未呈现其中一个控件（例如，它具有隐藏的属性集），则用户代理可能会报告脚本错误。

您的输入属于text类型，因此其目的是让用户输入数据，在隐藏时提交内容是用户可能不想要的内容。

如果您仍然希望在使用客户端验证时提交隐藏的输入，我建议使用<input type="hidden"> - 我可以想象验证没有错误，因为它们是不可见的。

Answer 2

我做了一个JSFiddle来探索你的问题here，我设法通过将选中添加到你的无线电按钮输入来解决它：<input type="radio" data-keyname="label" value="label" name="label" required checked>。在上面的代码中，未选中单选按钮，但由于它们标记为required，因此表单未通过验证，Chrome拒绝提交表单。