Google Chromeのみの「無効なフォームコントロール」

以下のコードは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によって非表示になっている場合、そのコントロールから「必須」属性も削除する必要があります。

次のようなコードがある場合、そのメッセージが表示されます。

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

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

この問題の解決策は、サイトの動作方法によって異なります

たとえば、このフィールドが必要でない限りフォームを送信したくない場合は、送信ボタンを無効にする必要があります

したがって、divを表示するjsコードは、送信ボタンも有効にする必要があります

ボタンも非表示にできます（非表示にしても非表示にしないと、ユーザーはenter他のフィールドを押すなどの他の方法でフォームを送信できますが、ボタンが無効になっているとこれは起こりません。

divが非表示の場合にフォームを送信するには、divを表示している間、フォーム内の必要な入力を無効にし、入力を有効にする必要があります。

誰かがコードを実行する必要がある場合は、必要なものを正確に教えてください

HTML5の検証に関心がない場合（JSまたはサーバーで検証している可能性があります）、フォームまたは入力要素に「novalidate」を追加してみてください。

HTML5コントロールに適切なタグを使用してみてくださいNumber for（整数）のように

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

小数または浮動小数点の場合

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

step = 'Any'これがないと、上記のフィールドに3.5や4.6などの小数値または浮動小数値を入力してフォームを送信できません。

この問題を修正するには、パターンを修正してHTML5コントロールのタイプを入力してください。

このエラーが発生し、非表示ではないフィールドに実際にあると判断しました。

この場合、それtype="number"は必須のフィールドでした。このフィールドに値が入力されていない場合、コンソールにエラーメッセージが表示され、フォームは送信されません。値を入力してから削除すると、期待どおりに検証エラーが表示されます。

これはChromeのバグだと思います。私の回避策は、初期値とデフォルト値を用意することでした。

エラーが発生しました：

name = 'telefono'の無効なフォームコントロールはフォーカスできません。

これは、チェックボックスをクリックしたときに有効または無効になる必須フィールドを正しく使用していないために発生していました。解決策はrequired、チェックボックスがマークされていない場合は常に属性を削除し、チェックボックスがマークされている場合は必要に応じてマークすることでした。

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");

私はいくつかを持っているので、私は、バグを修正するために、このような何かを持っているtype="number"とmin="0.00000001"：

HTML：

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS：

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

すべての非表示の入力フィールドをnullchromeに設定しない場合でも、入力を検証しようとします。

検証は仕事をしません。

<form action="whatever" method="post" novalidate>

ラジオの箇条書きの代わりにボタンを使用していて、JSを介して「アクティブ」状態を変更していたため、入力フィールドにclass = "hidden"を指定すると、この問題が発生しました。

メッセージを表示させたいのと同じグループの無線入力フィールド部分を追加しただけです。

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

他の2つのアクティブな弾丸は非表示です。これは非表示で、これにより検証メッセージがトリガーされ、コンソールエラーは発生しません。

このエラーは、10進数形式を追加すると発生します。追加するだけです

step="0.1"

フォームに設定した範囲外の数値（999999）を入力すると、このエラーメッセージが表示されました。

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

$("...").attr("required"); and $("...").removeAttr("required"); 

すべてのjQueryコードをその間に置くまで、私にとってはうまくいきませんでした：

$(document).ready(function() {
    //jQuery code goes here
});

requiredrequired = "required"に置き換えます