在 Google Chrome 中「Invalid form control」僅

問題描述

以下程式碼在 Safari 中執行良好，但在 Chrome 和 Firefox 中，表單將不會提交。 Chrome 控制檯記錄錯誤 An invalid form control with name='' is not focusable 。有任何想法嗎？

請注意，雖然下面的控制元件沒有名稱，但它們在提交時應該有名稱，由下面的 Javascript 填充。表單 DOES 在 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’ 屬性。

次佳解決方案

如果您不關心 HTML5 驗證 (也許您在 JS 或伺服器上驗證)，您可以嘗試將”novalidate” 新增到表單或輸入元素。

第三種解決方案

它會顯示該訊息，如果你有這樣的程式碼：

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

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

解決這個問題的方式取決於網站應該如何工作

例如，如果您不希望表單提交，除非此欄位是必需的，您應該停用提交按鈕

所以顯示 div 的 js 程式碼也應該啟用 submit 按鈕

你也可以隱藏按鈕 (應該被停用和隱藏，因為如果它被隱藏但沒有停用，使用者可以用其他方式提交表單，例如在任何其他欄位中按 enter，但如果按鈕被停用，則不會發生

如果您希望表單提交，如果 div 被隱藏，您應該停用其中所需的任何輸入，並在顯示 div 時啟用輸入

如果有人需要這樣做的程式碼，你應該告訴我你需要什麼

第四種方案

嘗試為 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 控制元件來解決此問題。

參考文獻

「Invalid form control」 only in Google Chrome

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 Google Chrome 中「Invalid form control」僅