Google Chrome无法提交带有display：none的表单 [英] Google Chrome cannot submit form with display:none

问题描述

除非我从 template = row style =display：none c> div。为什么??

The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??

（每个表单控件的名称由javascript动态填充，简化故障排除，我运行的形式没有javascript和问题归结为显示标签是否存在）。

(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).

这是Chrome控制台说的：

This is what Chrome console says:

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>

推荐答案

原因似乎是HTML 5 约束验证 - require 属性。 Chrome已开始支持此功能及其最新版本。

The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.

很显然，这是一个向后兼容性问题，但您可以通过为您的提交按钮设置 formnovalidate 属性。

Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.

我假设这实际上是一个安全功能，通过提交操作的隐藏内容阻止提交假设的用户数据，此引用指向该方向：

I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:

如果其中一个控件没有被渲染（例如它设置了隐藏属性），则用户代理可能会报告脚本错误。

If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

您的输入属于 text 类型，因此它们的目的是让用户输入数据，而隐藏是用户可能不想要的东西。

Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.

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

If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.

这篇关于Google Chrome无法提交带有display：none的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！