Name = ''の無効なフォームコントロールはフォーカスできません
私は自分のウェブサイトで深刻な問題を抱えています。 Google Chromeでは、一部の顧客が自分の支払いページに進むことができません。フォームを送信しようとすると、次のエラーが発生します。
An invalid form control with name='' is not focusable.
これはJavaScriptコンソールからです。
この問題は、required属性を持つ隠しフィールドが原因である可能性があると読みました。今の問題は、html5のrequired属性ではなく、.net Webformsのrequiredフィールドバリデータを使用していることです。
誰がこのエラーを受け取るのかはランダムに思われます。これに対する解決策を知っている人はいますか？
述べるには不十分です
フォームにnovalidate属性を追加すると役立ちます
それは問題を説明しません、そして、OPはそれがなぜ役立つのか、あるいは本当にそれが役に立つのか理解していないかもしれません。
ここ は、問題を真に説明する答えであり、問題を理解することで、あなたは自分の開発に適した解決策を見つけることができるはずです。
Chromeは、「このフィールドに入力してください」というメッセージがポップアップ表示されるように、必須ではあるがまだ空のコントロールに注目します。ただし、Chromeがメッセージをポップアップ表示する時点、つまりフォーム送信時にコントロールが非表示になっている場合、Chromeはコントロールに非表示になっているためコントロールにフォーカスできず、フォームは送信されません。
そのため、問題を回避するには、コントロールがJavaScriptによって非表示になっているときに、そのコントロールから 'required'属性を削除する必要もあります。
警告を有効に使うために、これを考慮してください - 検証に失敗したときにフィールドを隠さない 。しかしそれは厳密な規則でもなく、まったく規則でもありません。以下の私のコメントで述べたように、私は言い換えます
場合によっては、この問題はまったく問題にならず、アプリケーションの機能が失われることはありません。それからエラーは無視されるかもしれません。
更新日：2015年8月21日
問題のエラーは、時期尚早な検証によっても発生する可能性があります。 settype属性のない<button>入力があると、時期尚早な検証が行われる可能性があります。ボタンのtype属性がbuttonに設定されていない場合、Chrome（またはその他のブラウザ）はボタンがクリックされるたびに検証を実行します。これは、submitがデフォルトのタイプであるためです。ボタン問題を解決するために、ページに送信またはリセット以外のことをするボタンがある場合は、必ずこれを行います：<button type="button">
フォームに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にCSSプロパティdisplay: none;がある場合にも表示されます。
カスタムラジオ/チェックボックス入力をUI から隠さなければならない場所に作成し、それでもrequired属性を保持したい場合は、代わりに：
opacity: 0; CSSプロパティ
これまでの答えはどれも私にはうまくいきませんでした、そして私はrequiredname__属性を持つ隠しフィールドを持っていません。
私の場合、問題は<form>を持ち、次に<fieldset>を最初の子として持ち、<input>をrequiredname__属性で保持しているためです。 <fieldset>を削除すると問題は解決しました。あるいはフォームをそれでラップすることもできます。 HTML5で許可されています。
Windows 7 x 64、Chromeバージョン43.0.2357.130 mを使用しています。
私にとっては、これが起こるのは、値が ''の事前選択オプションを持つ<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で発生しています。
required 属性を持つフィールドを非表示（display：none）にしている可能性があります。
すべての必須フィールドがユーザーに表示されていることを確認してください。
フォーム送信中に表示されないrequired属性を持つフィールドがある場合、このエラーがスローされます。そのフィールドを隠そうとしたときに必要な属性を削除するだけです。フィールドをもう一度表示したい場合は、必要な属性を追加できます。このようにして、あなたの検証は妥協されないでしょう、そして同時に、エラーは投げられないでしょう。
Select2 Jquery問題の場合
問題はHTML5検証が隠された無効な要素にフォーカスできないことが原因です。 jQuery Select 2プラグインを扱っていたときにこの問題に遭遇しました。
解決策 HTML5のvalidateイベントの直前に操作できるように、フォームのすべての要素にイベントリスナーと 'invalid'イベントを挿入することができます。
$('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);
});
チェックボックスの入力でエラーが発生した場合は、さらにもう1つの可能性があります。チェックボックスでデフォルトを非表示にして他のスタイルに置き換えるカスタムCSSを使用している場合は、検証エラー時にChromeでフォーカスが合わないというエラーも発生します。
私はこれを私のスタイルシートで見つけました：
input[type="checkbox"] {
visibility: hidden;
}
簡単な解決策はこれでこれを置き換えることでした：
input[type="checkbox"] {
opacity: 0;
}
もう1つの考えられる原因は、必須フィールドを含む通常のフォームがあり、フォームを送信した後に（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
}
編集：説明
送信時にフォームを非表示にしていると仮定すると、このコードはフォームが有効になるまでフォーム/フィールドが非表示にならないことを保証します。そのため、フィールドが無効な場合でも、このフィールドは表示されたままであるため、ブラウザは問題なくフォーカスできます。
ええ..隠しフォームコントロールがフィールドを必要としている場合それはこのエラーを示しています。 1つの解決策は このフォームコントロールを無効にすることです 。これは通常、フォームコントロールを隠しているのであれば、その値に関心がないからです。そのため、フォームの送信中にこのフォームコントロール名と値のペアは送信されません。
まだ私を驚かせるものがあります...私は2つの異なる実体のための動的な振る舞いを持つフォームを持っています。 したがって、私のJSコードは、エンティティに応じて、 $（ '＃periodo'）。removeAttr（ 'required'）のようになります。 ）; $（ "＃periodo-container"）。hide（）;
$（ "＃periodo-container"）。show（）; $（ '＃periodo'）。prop（ 'required'、true）;そしてユーザーが他のエンティティを選択したとき。
しかし、フォームが送信されたときに時々、問題が現れます： "name = periodo ''の無効なフォームコントロールはフォーカスできません（私はidとnameに同じ値を使用しています）。
この問題を解決するには、 'required'を設定または削除している入力が常に表示されていることを確認する必要があります。
だから、私がやったことは：
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
それは私の問題を解決した…信じられない。
Angularには：
ng-required = "ブール値"
値がtrueの場合、これはhtml5の 'required'属性のみを適用します。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
このようなコードがある場合、それはそのメッセージを表示します。
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
ウィンドウロード時に隠されている要素に対して.removeAttribute("required")を試すことができます。問題の要素がjavascriptのために非表示としてマークされている可能性が非常に高いので（タブ形式）
例えば.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
これで作業は完了です。
それは私のために働きました...歓声
私の場合..
ng-showが使われていました。ng-ifが代わりに置かれ、私の誤りを修正しました。
これを修正する方法はたくさんあります
- あなたのフォームにnovalidateを追加しますが、それはそれがユーザーによって入力された間違った情報につながるフォームの検証を削除するので、全く間違っています。
<form action="...." class="payment-details" method="post" novalidate>
Useは必須フィールドからrequired属性を削除することができますが、これはフォームの検証を再度削除するため、これも間違っています。
これの代わりに：
<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">
フォームを送信しない場合は、他のオプションを実行する代わりに必須フィールドを無効にすることができます。これは私の考えでは推奨される解決策です。
好きです：
<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と一緒に必須を使用したことが原因でした。この要素が隠されている間に送信ボタンをクリックすると、エラー{name = ''の無効なフォームコントロールはフォーカスできませんが発生しました。
たとえばng-hideをrequiredと一緒に使用すると、次のようになります。
<input type="text" ng-hide="for some condition" required something >
代わりにng-patternでrequiredを置き換えることで解決しました。
解決策の例：
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
私は</form>タグを閉じずに同じページに複数のフォームを持つことに基づいて自分自身でこの問題を引き起こしたと答えるためにここに来ました。最初のフォームは、他の場所からのフォーム入力に対する検証を求めることを含むように拡張されます。これらのフォームは非表示になっているため、エラーが発生しました。
だから例えば：
<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'の無効なフォームコントロールはフォーカスできません。
別のそして最も確実な答えはHTML5のプレースホルダーの属性を使用することですそれからjs検証を使用する必要はないでしょう。
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chromeは、焦点を合わせるための空の、隠された、必要な要素を見つけることができません。簡単な解決法
それが役立つことを願っています。私はこの解決策で完全にソートされています。
入力されていない必須フィールドを含むフォームを送信していたため、このエラーが発生しました。
エラーが発生したのは、ブラウザが必須フィールドに集中してユーザーに必須フィールドであることを警告しようとしていたが、必須フィールドがディスプレイnone divに非表示になっているためです。表示されているタブから送信していましたが、必須フィールドが非表示のタブに表示されていたため、エラーになりました。
修正するには、必須項目が入力されていることを確認してください。
これらの答えのどれも、または他のGoogleの結果が私のために問題を解決したので、私はここに答えたかったです。
私にとっては、フィールドセットや隠し入力とは関係ありません。
max="5"を使うと（例えば）、このエラーが発生することがわかりました。 maxlength="5"を使用しても...エラーなし。
エラーとエラーの解消を数回再現することができました。
私が信じている「分」がなくても、 this がそれが有効であるべきであると述べている限り、そのコードを使うことがなぜエラーを引き起こすのかまだわかりません。
requiredを指定したときだけでなく、minとmaxを使用するときにもこの問題が発生します。
<input type="number" min="1900" max="2090" />
そのフィールドは他の無線値に基づいて非表示にしたり表示したりできます。そのため、一時的な解決策として、検証を削除しました。
私は同じ問題を抱えていました。このトリックは私のために働きました。
<input type="password" name="password" id="password"
class="form-control" placeholder="" required>
に
<input type="password" name="password" id="password"
class="form-control" placeholder="" >
これは、フォームにrequired属性を持つ隠し入力があるためです。
私の場合は、選択ボックスがあり、インラインスタイルを使用して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;
}
フォームの必須属性を持つすべてのコントロールにもname属性が設定されていることを確認してください。
フォームで使用するためにHTML要素を複製するときに同じエラーが発生しました。
（私は部分的に完成したフォームを持っていて、そこにテンプレートが挿入されています。そしてテンプレートが修正されます）
エラーは、複製されたバージョンではなく、元のフィールドを参照していました。
検証を実行する前に、フォームに自分自身を再評価させるメソッドを見つけることができませんでした。
この問題を回避するために、必要な属性を元の要素から削除し、それをフォームに挿入する前にクローンフィールドに動的に追加しました。フォームは複製され変更されたフィールドを正しく検証します。
私は同じ問題でここに来ました。私にとっては（必要に応じて隠し要素を注入する - つまり、仕事用アプリでの教育）、必須のフラグがありました。
私が気付いたのは、バリデータがドキュメントの準備ができるよりも早くインジェクションを起動していたということです。
私のオリジナルのng-requiredタグは可視性タグ（vm.flags.hasHighSchool）を使っていました。
必須 ng-required = "vm.flags.highSchoolRequired == true"を設定するための専用のフラグを作成することで解決しました。
そのフラグを設定するときに10msのコールバックを追加し、問題は解決しました。
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>
私はこの質問がよく聞かれるのを見て、この「エラー」に遭遇しました。これがChromeの実際のバグであるかどうかについての質問へのリンクさえありました。
これは、1つ以上のフォーム入力タイプ要素が非表示になっており、これらの要素に最小/最大制限（またはその他の検証制限）が課されている場合に発生する応答です。
フォームの作成時には、要素に起因する値はありません。後で要素の値を入力するか、変更しないでください。 送信時に、フォームは解析され、これらの検証制限の外側にある隠れた要素はこの「エラー」をコンソールにスローし、送信は失敗します。あなたはこれらの要素にアクセスすることができないので（それらは隠されているので）これは有効な唯一の応答です。
これは実際の問題でもバグでもありません。 1つまたは複数の要素で規定されている制限外の、送信されようとしている要素値があることを示しています。
これを修正するには、フォームが送信される前の任意の時点でフォームに非表示になっている要素に有効なデフォルト値を割り当てると、これらの「エラー」は発生しなくなります。それ自体はバグではありません、それはあなたがより良いプログラミング習慣にあなたを強制するだけです。
注意：これらの値を検証制限の範囲外に設定したい場合は、form.addEventListener（ 'submit'、myFunction）を使用して 'submit'イベントをインターセプトし、これらの要素を "myFunction"に記入してください。検証チェックは "myFunction（）が呼び出される前に実行されるようです。
私がこの長い答えを見逃してはいけないと思ったのは、本当に奇妙なことでした。
ロードしてアクションを実行するために呼び出されるdialogBoxを通じて動的に更新されるdiv要素があります。
要するにdiv divは
<div id="name${instance.username}"/>
私はユーザーを持っていました。それは、何らかの理由で、エンコーディングがJavaスクリプトの世界で奇妙なことをしたことです。他の場所で機能しているフォームに対してこのエラーメッセージが表示されます。
これを絞り込み、代わりに数字を使用した再テスト、すなわちidを使用して問題を解決したようです。
上記のすべての解決策とは異なっていたので、私の主張を述べておきましょう。正しく閉じられていないHTMLタグがありました。要素は not requiredでしたが、hidden divに埋め込まれていました
私の場合の問題はtype="datetime-local"にありました。これは何らかの理由でフォーム送信時に検証されていました。
私はこれを変えました
<input type="datetime-local" />
その中に
<input type="text" />