谷歌浏览器无法提交带有 display:none 的表单

Question

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

（每个表单控件的name 由javascript 动态填充，但是，为了简化故障排除，我在没有javascript 的情况下运行表单，问题归结为display 标记是否存在)。

Chrome 控制台是这样说的：

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

HTML：

<form method="POST" action="/add/bundle">
    <p>
        <input type="text" name="singular" placeholder="Singular Name" required>
        <input type="text" name="plural" placeholder="Plural Name" required>
    </p>

    <h4>Asset Fields</h4>

<div class="template-view" id="template_row" style="display:none">
    <input type="text" data-keyname="name" placeholder="Field Name">
    <input type="text" data-keyname="hint" placeholder="Hint">


    <select data-keyname="fieldtype" required>
        <option value="">Field Type...</option>
    </select>

    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label" required> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
    <button class="add" type="button">+</button>
    <button class="remove" type="button">-</button>
</div>

<div id="target_list"></div>

    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p>

</form>

Answer 1

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

显然这似乎是backward compatibility issue，但您可以通过为提交按钮设置formnovalidate 属性来修复它。

我认为这实际上是一个安全功能，通过提交操纵的隐藏内容来防止提交假定的用户数据，这句话指向了那个方向：

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

您的输入是text 类型，因此它们的目的是让用户输入数据，在隐藏时提交他们的内容是用户可能不希望的。

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

Answer 2

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