除非我从 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>
最佳答案
原因似乎是 HTML 5 constraint validation - 它是 require
属性。 Chrome 已开始在其最新版本中支持这一点。
显然这似乎是一个 backward compatibility issue ,但您可以通过为提交按钮设置 formnovalidate
属性来修复它。
我认为这实际上是一项安全功能,可防止通过提交被操纵的隐藏内容来提交假定的用户数据,此引用指向该方向:
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
类型,因此它们的目的是让用户输入数据,而在隐藏时提交他们的内容是用户可能不想要的。
如果您仍然想在使用客户端验证时提交隐藏的输入,我建议改用 <input type="hidden">
- 我可以想象那里的验证没有错误,因为它们本来就是不可见的。
关于html - Google Chrome 无法提交显示为 :none 的表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7183692/