“无效的表单控件”只在Google Chrome中使用 [英] "Invalid form control" only in Google Chrome

问题描述

下面的代码在Safari中运行良好，但在Chrome和Firefox中表单不会提交。 Chrome控制台记录错误名称=''的无效表单控件不可聚焦。任何想法？

请注意，虽然下面的控件没有名称，但它们在提交时应该有名称，由下面的Javascript填充。

 < form method =POSTaction =/ add / bundle> 
< p> 
< input type =textname =singularplaceholder =Singular Namerequired> 
< input type =textname =pluralplaceholder =Plural Namerequired> 
< / p> 
< h4>资产字段< / h4> 
< div class =template-viewid =template_rowstyle =display：none> 
< input type =textdata-keyname =nameplaceholder =Field Namerequired> 
< input type =textdata-keyname =hintplaceholder =Hint> 
< select data-keyname =fieldtyperequired> 
< option value =>字段类型...< / option> 
< option value =电子邮件>电子邮件< / option> 
< option value =密码>密码< / option> 
< option value =文字>文字< / option> 
< / select> 
< input type =checkboxdata-keyname =requiredvalue =true>必需
< input type =checkboxdata-keyname =searchvalue =true>可搜索
< input type =checkboxdata-keyname =readonlyvalue =true> ReadOnly 
< input type =checkboxdata-keyname =autocompletevalue =true> AutoComplete 
< input type =radiodata-keyname =labelvalue =labelname =label>标签
< input type =radiodata-keyname =uniquevalue =uniquename =unique> Unique 
< button class =addtype =button> +< / button> 
< button class =removetype =button>  - < / button> 
< / div> 
 
< div id =target_list>< / div> 
< p>< input type =submitname =form.submittedvalue =Submitautofocus>< / p> 
< / form> 
 
< script> 
函数addDiv（）
 {
 var pCount = $（'。template-view'，'#target_list'）。length; 
 var pClone = $（'＃template_row'）。clone（）; （（el）.type（$）; 
 $（'select，input，textarea'，pClone）.each（function（idx，el）{
 $ el = $（this）; 
 if ='radio'）{
 $ el.attr（'value'，pCount +'_'+ $ el.data（'keyname'））; 
} 
 else {
 $ el.attr（'name'，pCount +'_'+ $ el.data（'keyname'））; 
}; 
}）; 
 $（'＃target_list'）。append（pClone）; 
 pClone.show（）; 
} 
 
函数removeDiv（elem）{
 var pCount = $（'。template-view'，'#target_list'）。length; 
 if（pCount！= 1）
 {
 $（elem）.closest（'。template-view'）。remove（）; 
} 
}; 
 $ b $（'。add'）。live（'click'，function（）{
 addDiv（）; 
}）; 
 $ b $（'。remove'）。live（'click'，function（）{
 removeDiv（this）; 
}）; 
 
 $（document）.ready（addDiv）; 
 
< / script> 
  

解决方案

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.

这篇关于“无效的表单控件”只在Google Chrome中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！