“无效的表单控件"仅在谷歌浏览器中 [英] "Invalid form control" only in Google Chrome

问题描述

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

请注意，虽然下面的控件没有名称，但它们在提交时应该有名称，由下面的 Javascript 填充.该表单在 Safari 中确实有效.

<p><input type="text" name="singular" placeholder="Singular Name" required><input type="text" name="plural" placeholder="Plural Name" required></p><h4>资产字段</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="">字段类型...</option><option value="电子邮件">电子邮件</option><option value="密码">密码</option><option value="Text">Text</option></选择><input type="checkbox" data-keyname="required" value="true">必需的<input type="checkbox" data-keyname="search" value="true">可搜索<input type="checkbox" data-keyname="readonly" value="true">只读<input type="checkbox" data-keyname="autocomplete" value="true">自动完成<input type="radio" data-keyname="label" value="label" name="label">标签<input type="radio" data-keyname="unique" value="unique" name="unique">独特的<button class="add" type="button">+</button><button class="remove" type="button">-</button>

<div id="target_list"></div><p><input type="submit" name="form.submitted" value="Submit" autofocus></p></表单><脚本>函数 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'));}别的 {$el.attr('name', pCount + '_' + $el.data('keyname'));};});$('#target_list').append(pClone);pClone.show();}函数 removeDiv(elem){var pCount = $('.template-view', '#target_list').length;如果(pCount ！= 1){$(elem).closest('.template-view').remove();}};$('.add').live('click', function(){addDiv();});$('.remove').live('click', function(){removeDiv(this);});$(document).ready(addDiv);

解决方案

Chrome 希望将焦点放在需要但仍为空的控件上，以便它可以弹出消息请填写此字段".但是，如果控件在 Chrome 想要弹出消息的时候隐藏，也就是在表单提交的时候，Chrome 无法关注该控件，因为它是隐藏的，因此表单不会提交.

因此，为了解决这个问题，当一个控件被 javascript 隐藏时，我们还必须从该控件中删除 'required' 属性.

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?

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.

<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 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.

这篇关于“无效的表单控件"仅在谷歌浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！