"无效的表单控件"仅适用于Google Chrome

Question

以下代码在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>

Answer 1

Chrome希望专注于所需的控件,但仍然是空的,以便它可以弹出消息"请填写此字段".但是,如果控件在Chrome想要弹出消息时隐藏,即在提交表单时,Chrome无法专注于控件,因为它是隐藏的,因此表单不会提交.

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

Answer 2

如果您有这样的代码,它将显示该消息:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

解决此问题的方法取决于网站的工作方式

例如,如果您不希望表单提交,除非需要此字段,您应该禁用提交按钮

所以显示div的js代码也应该启用提交按钮

你也可以隐藏按钮(应该被禁用和隐藏,因为如果它被隐藏但没有被禁用,用户可以用其他方式提交表单,如按enter任何其他字段,但如果按钮被禁用,这将不会发生

如果你希望表格提交,如果div被隐藏你应该禁用其中的任何所需输入并在你显示div时启用输入

如果有人需要这些代码,你应该告诉我你需要什么

Answer 3

如果您不关心HTML5验证(可能是在JS或服务器上验证),您可以尝试在表单或输入元素中添加"novalidate".

Answer 4

尝试为HTML5控件使用适当的标签对于数字(整数)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

对于小数或浮点数

 <input type='number' min='0' step='Any'/>

step ='Any'如果没有这个,你不能在上面的字段中提交输入任何小数或浮动值的表格,如3.5或4.6.

尝试修复模式,键入HTML5控件以解决此问题.