Html “无效的表单控件”仅在 Google Chrome 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7168645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Invalid form control" only in Google Chrome
提问by MFB
The code below works well in Safari but in Chrome and Firefox the form will not submit. Chrome console logs the error An invalid form control with name='' is not focusable. Any ideas?
下面的代码在 Safari 中运行良好，但在 Chrome 和 Firefox 中，表单不会提交。Chrome 控制台记录错误An invalid form control with name='' is not focusable。有任何想法吗？
Note that whilst the controls below do not have names, they should have names at the time of submission, populated by the Javascript below. The form DOES work in Safari.
请注意，虽然下面的控件没有名称，但它们在提交时应该有名称，由下面的 Javascript 填充。该表单在 Safari 中有效。
<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" required>
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
<option value="Email">Email</option>
<option value="Password">Password</option>
<option value="Text">Text</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"> Label
<input type="radio" data-keyname="unique" value="unique" name="unique"> 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>
<script>
function addDiv()
{
var pCount = $('.template-view', '#target_list').length;
var pClone = $('#template_row').clone();
$('select, input, textarea', pClone).each(function(idx, el){
$el = $(this);
if ((el).type == 'radio'){
$el.attr('value', pCount + '_' + $el.data('keyname'));
}
else {
$el.attr('name', pCount + '_' + $el.data('keyname'));
};
});
$('#target_list').append(pClone);
pClone.show();
}
function removeDiv(elem){
var pCount = $('.template-view', '#target_list').length;
if (pCount != 1)
{
$(elem).closest('.template-view').remove();
}
};
$('.add').live('click', function(){
addDiv();
});
$('.remove').live('click', function(){
removeDiv(this);
});
$(document).ready(addDiv);
</script>
回答by MFB
Chrome wants to focus on a control that is required but still empty so that it can pop up the message 'Please fill out this field'. However, if the control is hidden at the point that Chrome wants to pop up the message, that is at the time of form submission, Chrome can't focus on the control because it is hidden, therefore the form won't submit.
Chrome 希望将焦点放在一个需要但仍为空的控件上，以便它可以弹出消息“请填写此字段”。但是，如果控件在 Chrome 想要弹出消息的时候隐藏，也就是在表单提交的时候，Chrome 无法关注该控件，因为它是隐藏的，因此表单不会提交。
So, to get around the problem, when a control is hidden by javascript, we also must remove the 'required' attribute from that control.
因此，为了解决这个问题，当一个控件被 javascript 隐藏时，我们还必须从该控件中删除 'required' 属性。
回答by Robert
It will show that message if you have code like this:
如果您有这样的代码，它将显示该消息：
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
solution to this problem will depend on how the site should work
这个问题的解决方案将取决于网站应该如何工作
for example if you don't want the form to submit unless this field is required you should disable the submit button
例如，如果您不希望表单提交，除非此字段是必需的，您应该禁用提交按钮
so the js code to show the div should enable the submit button as well
所以显示 div 的 js 代码也应该启用提交按钮
you can hide the button too (should be disabled and hidden because if it's hidden but not disabled the user can submit the form with others way like press enterin any other field but if the button is disabled this won't happen
你也可以隐藏按钮（应该被禁用和隐藏，因为如果它被隐藏但没有被禁用，用户可以用其他方式提交表单，比如enter在任何其他字段中按下，但如果按钮被禁用，这不会发生
if you want the form to submit if the div is hidden you should disable any required input inside it and enable the inputs while you are showing the div
如果您希望表单在隐藏 div 的情况下提交，您应该禁用其中的任何必需输入并在显示 div 时启用输入
if someone need the codes to do so you should tell me exactly what you need
如果有人需要代码，你应该告诉我你需要什么
回答by John Velonis
If you don't care about HTML5 validation (maybe you are validating in JS or on the server), you could try adding "novalidate" to the form or the input elements.
如果您不关心 HTML5 验证（也许您正在 JS 中或在服务器上进行验证），您可以尝试在表单或输入元素中添加“novalidate”。
回答by sudhAnsu63
try to use proper tags for HTML5 controls Like for Number(integers)
尝试为 HTML5 控件使用适当的标签，例如 Number(integers)
<input type='number' min='0' pattern ='[0-9]*' step='1'/>
for Decimals or float
对于小数或浮点数
<input type='number' min='0' step='Any'/>
step='Any'Without this you cannot submit your form entering any decimal or float value like 3.5 or 4.6 in the above field.
step='Any'如果没有这个，您将无法提交表单，在上述字段中输入任何小数或浮点值，如 3.5 或 4.6。
Try fixing the pattern , type for HTML5 controls to fix this issue.
尝试修复模式，输入 HTML5 控件以解决此问题。
回答by Matthew Schinckel
I was getting this error, and determined it was actually on a field that was not hidden.
我收到此错误，并确定它实际上位于未隐藏的字段上。
In this case, it was a type="number"field, that is required. When no value has ever been entered into this field, the error message is shown in the console, and the form is not submitted. Entering a value, and then removing it means that the validation error is shown as expected.
在这种情况下，它是一个type="number"字段，这是必需的。如果从未在此字段中输入任何值，则控制台中会显示错误消息，并且不会提交表单。输入一个值，然后删除它意味着验证错误按预期显示。
I believe this is a bug in Chrome: my workaround for now was to come up with an initial/default value.
我相信这是 Chrome 中的一个错误：我现在的解决方法是提出一个初始/默认值。
回答by frddy
I had the error:
我有错误：
An invalid form control with name='telefono' is not focusable.
name='telefono' 的无效表单控件不可聚焦。
This was happening because I was not using the required field correctly, which enabled and disabled when clicking on a checkbok. The solution was to remove the requiredattribute whenever the checkbok was not marked and mark it as required when the checkbox was marked.
发生这种情况是因为我没有正确使用必填字段，单击复选框时启用和禁用了该字段。解决方案是required在未标记复选框时删除该属性，并在标记复选框时将其标记为必需。
var telefono = document.getElementById("telefono");
telefono.removeAttribute("required");
回答by Dalin Huang
I have to do something like this to fix the bug, since I have some type="number"with min="0.00000001":
我必须做这样的事情来修复错误，因为我有一些type="number"有min="0.00000001"：
HTML:
HTML：
<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />
JS:
JS：
$('input[type="submit"]').click(function(e) {
//prevent chrome bug
$("input:hidden").val(null);
});
If I don't set all hidden input field to nullchrome will still try to validate the input.
如果我不将所有隐藏的输入字段设置为nullchrome 仍会尝试验证输入。
回答by Hassi
No validate will do the job.
没有验证将完成这项工作。
<form action="whatever" method="post" novalidate>
回答by Thomas David Kehoe
I got this error message when I entered a number (999999) that was out of the range I'd set for the form.
当我输入的数字 (999999) 超出了我为表单设置的范围时，我收到了此错误消息。
<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">
回答by Роман Зыков
this error get if add decimal format. i just add
如果添加十进制格式，则会出现此错误。我只是补充
step="0.1"
