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

私のウェブサイトに深刻な問題があります。Google Chromeでは、一部の顧客が私の支払いページに進むことができません。フォームを送信しようとすると、次のエラーが発生します。

An invalid form control with name='' is not focusable.

これはJavaScriptコンソールからのものです。

問題は、必要な属性を持つ非表示フィールドが原因である可能性があると読みました。ここで問題は、html5必須属性ではなく、.net webforms必須フィールドバリデーターを使用していることです。

このエラーが発生するのはランダムです。これの解決策を知っている人はいますか？

この問題は、フォームフィールドが検証に失敗した場合にChromeで発生しますが、それぞれの無効なコントロールがフォーカスできないため、ブラウザがその横に「このフィールドに入力してください」というメッセージを表示しようとしても失敗します。

フォームコントロールは、いくつかの理由で検証がトリガーされたときにフォーカスできない場合があります。以下に説明する2つのシナリオが最も顕著な原因です。

• ビジネスロジックの現在のコンテキストによれば、フィールドは無関係です。そのようなシナリオでは、それぞれのコントロールをDOMから削除するかrequired、その時点で属性でマークしないでください。

• ユーザーが入力でENTERキーを押すと、早期検証が発生する可能性があります。または、コントロールのtype属性が正しく定義されていないフォームのボタン/入力コントロールをクリックしたユーザー。ボタンのtype属性がに設定されていない場合、はボタンの属性のデフォルト値であるbuttonため、ボタンがクリックされるたびにChrome（またはその他のブラウザ）が検証を実行します。submittype

  この問題を解決するために、送信またはリセット以外の操作を行うボタンがページにある場合は、必ずこれを行うようにしてください<button type="button">。

https://stackoverflow.com/a/7264966/1356062も参照してください

novalidateフォームに属性を追加すると役立ちます。

<form name="myform" novalidate>

あなたにはform、あなたは隠されている可能性がありますinput持つrequired属性を：

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

formこれらの要素に焦点を当てることができない、あなたは削除する必要がありrequired、すべての隠された入力から、またはあなたが本当に隠された入力が必要な場合は、それらを処理するために、JavaScriptで検証機能を実装します。

他の誰かがこの問題を抱えている場合、私は同じことを経験しました。コメントで説明したように、それはブラウザが非表示フィールドを検証しようとしたことが原因でした。それはフォームの空のフィールドを見つけてそれらに集中しようとすることでしたが、それらがdisplay:none;、できませんでした。したがってエラー。

私はこれに似たものを使用してそれを解決することができました：

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

また、これはおそらくGoogle Chromeのみの「無効なフォームコントロール」の複製です

私の場合、問題は次のinput type="radio" requiredように隠されていることでした：

visibility: hidden;

このエラーメッセージは、必要な入力タイプradioかcheckbox、display: none;CSSプロパティがあるかどうかも示します。

UIから非表示にし、required属性を保持する必要があるカスタムラジオ/チェックボックス入力を作成する場合は、代わりに次を使用する必要があります。

opacity: 0; CSSプロパティ

以前の答えはどれも私にとってうまくいきませんでした、そして私には隠しフィールドがありません required。また属性を。

私の場合、問題は、属性を持つを保持する最初の子としてa <form>を持っていることによって引き起こされました。削除した問題は解決しました。または、フォームをラップすることもできます。HTML5では許可されています。<fieldset><input>required<fieldset>

私はWindows 7 x64、Chromeバージョン43.0.2357.130 mを使用しています。

チェックボックスの入力でエラーが発生した場合のさらに別の可能性。チェックボックスでデフォルトを非表示にし、他のスタイルに置き換えるカスタムCSSを使用している場合、検証エラー時にChromeでフォーカスできないエラーがトリガーされます。

私はこれを私のスタイルシートで見つけました：

input[type="checkbox"] {
    visibility: hidden;
}

簡単な修正はこれをこれに置き換えることでした：

input[type="checkbox"] {
    opacity: 0;
}

必要な属性を持つ非表示（表示：なし）フィールドがある可能性があります。

すべての必須フィールドがユーザーに表示されることを確認してください:)

私にとってこれは、<select>値が ''のオプションが事前に選択されているフィールドがある場合に起こります：

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

残念ながら、これはプレースホルダーの唯一のクロスブラウザーソリューションです（「選択」ボックスのプレースホルダーを作成するにはどうすればよいですか？）。

この問題はChrome 43.0.2357.124で発生します。

フォームの送信中に表示されない必須属性のフィールドがある場合、このエラーがスローされます。そのフィールドを非表示にしようとしたときに、必要な属性を削除するだけです。フィールドを再度表示する場合は、必要な属性を追加できます。これにより、検証が危険にさらされることはなく、同時にエラーがスローされることもありません。

Select2 jqueryの問題の場合

この問題は、HTML5検証が非表示の無効な要素にフォーカスできないために発生します。jQuery Select2プラグインを扱っていたときに、この問題に遭遇しました。

ソリューション フォームのすべての要素の「無効な」イベントにイベントリスナーを挿入して、HTML5の検証イベントの直前に操作できるようにすることができます。

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

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

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

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

はい。非表示のフォームコントロールに必須フィールドがある場合、このエラーが表示されます。1つの解決策は、このフォームコントロールを無効にすることです。これは通常、フォームコントロールを非表示にする場合、その値に関心がないためです。したがって、このフォームコントロールの名前と値のペアは、フォームの送信中に送信されません。

あなたは試すことができます .removeAttribute("required")ウィンドウのロード時に非表示になっている要素をます。javascript（タブ付きフォーム）により、問題の要素が非表示になっている可能性が非常に高いため

例えば

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

これはタスクを実行する必要があります。

それは私のために働いた...乾杯

別の考えられる原因であり、必須フィールドのある通常のフォームがあり、フォームを送信し、送信した直後に（JavaScriptを使用して）フォームを非表示にすると、検証機能が動作する時間がないため、以前のすべての回答でカバーされていません。

検証機能は必要なフィールドに焦点を当ててエラー検証メッセージを表示しようとしますが、フィールドは既に非表示になっているため、「name = ''の無効なフォームコントロールはフォーカスできません。」登場！

編集：

このケースを処理するには、送信ハンドラ内に次の条件を追加するだけです

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

編集：説明

送信時にフォームを非表示にする場合、このコードは、フォームが有効になるまでフォーム/フィールドが非表示にならないことを保証します。そのため、フィールドが有効でない場合でも、このフィールドが表示されているため、ブラウザは問題なくそれに焦点を合わせることができます。

まだ驚かれることがあります... 2つの異なるエンティティに対して動的な動作をするフォームがあります。1つのエンティティには、他のエンティティには不要ないくつかのフィールドが必要です。したがって、エンティティに応じて、私のJSコードは次のようになります。$（ '＃periodo'）。removeAttr（ 'required'）; $（ "＃periodo-container"）。hide（）;

ユーザーが他のエンティティを選択した場合：$（ "＃periodo-container"）。show（）; $（ '＃periodo'）。prop（ 'required'、true）;

しかし、フォームが送信されると、「name = periodoの無効なフォームコントロール」にフォーカスできない場合があります（IDと名前に同じ値を使用しています）。

この問題を解決するには、「必須」を設定または削除する入力が常に表示されるようにする必要があります。

だから、私がしたことは：

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

それで問題は解決しました...信じられない。

私の場合..

ng-show使用されていました。
ng-ifその場所に置かれ、私のエラーを修正しました。

Angularを使用する場合：

ng-required = "boolean"

これは、値がtrueの場合にのみ、html5の「必須」属性を適用します。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

私はこの問題を自分で引き起こしたのだと答えるためにここに来ました </form>タグをで、同じページに複数のフォームがある。最初のフォームは、他の場所からのフォーム入力の検証を求めることを含むように拡張されます。THOSEフォームが非表示になっているため、エラーが発生しました。

たとえば：

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

トリガー

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

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

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

これを修正するには多くの方法があります

1. フォームにnovalidateを追加しますが、フォーム検証を削除してユーザーが誤った情報を入力するため、完全に間違っています。

<form action="...." class="payment-details" method="post" novalidate>

2. 必須フィールドから必須属性を削除すると、フォームの検証が再度削除されるため、これも誤りです。

   これの代わりに：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. 他のオプションを実行する代わりに、フォームを送信しない場合は、必須フィールドを無効にできます。これは私の意見では推奨されるソリューションです。

   お気に入り：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

または、javascript / jqueryコードを使用して無効にするかどうかは、シナリオによって異なります。

Angular JSを使用しているときに同じ問題が見つかりました。ng-hide と一緒にrequiredを使用したことが原因です。この要素が非表示になっているときに送信ボタンをクリックすると、エラーが発生しました。名前が「」の無効なフォームコントロールにフォーカスできません。最終的に！

たとえば、ng-hideとrequiredを一緒に使用する場合：

<input type="text" ng-hide="for some condition" required something >

代わりに、必要なものをng-patternに置き換えることで解決しました。

ソリューションの例：

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

他のAngularJS 1.xユーザーの場合、コントロールを完了する必要がないときに、フォームコントロールをDOMから完全に削除するのではなく、非表示にしていたため、このエラーが発生しました。

/のng-if代わりに使用してこれを修正しましたng-showng-hide検証が必要なフォームコントロールを含むdivの。

これがエッジケースのユーザーの皆さんに役立つことを願っています。

上記のすべてのソリューションとは異なるため、私のケースを述べさせてください。正しく閉じられていないhtmlタグがありました。要素はではなかった requiredが、hiddendiv に埋め込まれていた

私の場合の問題は、type="datetime-local"何らかの理由でフォームの送信時に検証されたにありました。

私はこれを変えた

<input type="datetime-local" />

その中に

<input type="text" />

これらの回答、またはその他のGoogleの結果のいずれでも問題が解決されなかったため、ここで回答したいと思いました。

私にとっては、フィールドセットや隠し入力とは何の関係もありませんでした。

max="5"（たとえば）を使用すると、このエラーが発生することがわかりました。私が使用した場合maxlength="5" ...エラーはありません。

エラーとエラーのクリアを何度か再現することができました。

そのコードを使用すると、限り、エラーが発生し、なぜ私はまだ知らない。この状態それも私は信じて「分」せずに、有効にする必要があります。

または、HTML5プレースホルダー属性を使用するという別の確実な答えがあれば、js検証を使用する必要はありません。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chromeは、空の非表示の要素やフォーカスする必要のある要素を見つけることができません。シンプルなソリューション。

お役に立てば幸いです。私はこのソリューションで完全にソートされています。

私は同じ問題でここに来ました。私にとって（必要に応じて隠し要素を注入する-つまり、求人アプリでの教育）には、必要なフラグがありました。

私が気づいたのは、ドキュメントの準備が整うよりも速くバリデーターがインジェクションに対して発砲しているということでした。

私の元のng-requiredタグは可視性タグ（vm.flags.hasHighSchool）を使用していました。

専用のフラグを作成して、必要なng-required = "vm.flags.highSchoolRequired == true"を設定することで解決しました

そのフラグの設定に10ミリ秒のコールバックを追加し、問題は解決しました。

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

HTML：

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

必須属性を持つフォーム内のすべてのコントロールにも、name属性が設定されていることを確認してください

このエラーは、必須フィールドに入力されていないフォームを送信しようとしたときに発生しました。

ブラウザーが必須フィールドにフォーカスしてユーザーにフィールドが必要であることを警告しようとしましたが、それらの必須フィールドがディスプレイのdivに非表示になっていたため、ブラウザーがそれらにフォーカスできなかったため、エラーが発生しました。表示されているタブから送信すると、必須フィールドが非表示のタブにあるため、エラーが発生しました。

修正するには、必要なフィールドが入力されていることを確認してください。

これは、フォームに必要な属性を持つ非表示の入力があるためです。

私の場合、選択ボックスがあり、インラインスタイルを使用してjqueryトークナイザーによって非表示にされました。トークンを選択しない場合、フォームの送信時にブラウザが上記のエラーをスローします。

だから、私は以下のCSSテクニックを使用してそれを修正しました：

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

フォームで使用するHTML要素を複製するときにも同じエラーが発生しました。

（テンプレートが注入された部分的に完成したフォームがあり、その後テンプレートが変更されます）

エラーは、複製されたバージョンではなく、元のフィールドを参照していました。

検証を実行する前に、フォームがそれ自体を再評価するように強制するメソッドが見つかりませんでした（現在は存在しない古いフィールドへの参照が削除されることを期待して）。

この問題を回避するために、フォームに挿入する前に、元の要素から必要な属性を削除し、それをクローンフィールドに動的に追加しました。フォームは、複製および変更されたフィールドを正しく検証するようになりました。