下面的代码在 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>
最佳答案
Chrome 想要关注一个必需但仍为空的控件,以便它可以弹出消息“请填写此字段”。但是,如果控件在 Chrome 想要弹出消息的时候被隐藏,也就是在提交表单时,Chrome 无法关注控件,因为它是隐藏的,因此表单不会提交。
因此,为了解决这个问题,当一个控件被 javascript 隐藏时,我们还必须从该控件中删除“required”属性。
关于html - "Invalid form control"仅在谷歌浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7168645/