“无效的表单控制”只在谷歌浏览器

以下代码在 Safari 中运行良好，但在 Chrome 和 Firefox 中表单不会提交。Chrome 控制台记录错误 An invalid form control with name='' is not focusable。有什么想法吗？

请注意，虽然下面的控件没有名称，但是它们在提交时应该有名称，由下面的 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>
118310 次浏览
小开
最佳答案

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.

So, to get around the problem, when a control is hidden by javascript, we also must remove the 'required' attribute from that control.

小开

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.

小开

try to use proper tags for HTML5 controls Like for 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.

Try fixing the pattern , type for HTML5 controls to fix this issue.

小开

I had the error:

An invalid form control with name='telefono' is not focusable.

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 required attribute whenever the checkbok was not marked and mark it as required when the checkbox was marked.

var telefono = document.getElementById("telefono");
telefono.removeAttribute("required");
小开

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

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 enter in any other field but if the button is disabled this won't happen

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

if someone need the codes to do so you should tell me exactly what you need

小开

replace required by required="required"

小开

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.

I believe this is a bug in Chrome: my workaround for now was to come up with an initial/default value.

小开

I had this issue when I had class="hidden" on the input fields because I was using buttons instead of radio bullets - and changing the "active" state via JS..

I simply added an extra radio input field part of the same group where i wanted the msg to appear:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

the other 2 active bullets are invisible, this one isnt and this triggers the validation message and no console errors - bit of a hack but what isnt these days..

小开 
$("...").attr("required"); and $("...").removeAttr("required");

didn't work for me until I putted all my jQuery code between that:

$(document).ready(function() {
//jQuery code goes here
});
小开

I have to do something like this to fix the bug, since I have some type="number" with min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
//prevent chrome bug
$("input:hidden").val(null);
});

If I don't set all hidden input field to null chrome will still try to validate the input.

小开

this error get if add decimal format. i just add

step="0.1"
小开

No validate will do the job.

<form action="whatever" method="post" novalidate>
小开

I got this error message when I entered a number (999999) that was out of the range I'd set for the form.

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

提交答案