web-dev-qa-db-ja.com

name = ''の無効なフォームコントロールはフォーカスできません。必要なしOR非表示の入力

私はよく知られているChromeの「フォーカス不可能な入力」エラーに直面していますが、私の状況は他の記事で説明されている状況とは異なります。

このエラーメッセージは、先の尖った入力で最初に複製されていますが、この入力には必須の属性がありません。コード：

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

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

ユーザーがフォームに入力している間、このフィールドはjqueryを使用したjsスクリプトによって値を取得します。ユーザーが別の入力にサイズを入力すると、スクリプトはサイズ値を使用して計算を実行し、jquery関数を使用して「priceFinal」入力に結果を入力します。val（）

ブラウザでは、入力が正しく入力され、その時点でエラーが表示されていないことがわかります。そして、「novalidate」ソリューションでは、すべてがうまくいくので、フォーカスできないエラーの原因になり得ないと思います。

それから、私が書いていない、私のDOMに存在しない名前のない入力で同じエラーを受け取りました：

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

私のフォームに名前のない唯一の入力はtype：submit oneであるため、これは奇妙です

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

いくつかの必須フィールドがありますが、フォームを送信するときにすべてが入力されていることを常に確認しています。役立つ場合に備えて貼り付けます：

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

Novalidateソリューションはエラーをクリアしますが、修正はしません。ハックなしで解決する方法が必要だということです。

誰が何が起こっているのか考えていますか？ありがとう

html5formsvalidationgoogle-chrome
13
nach

私も同じ問題を抱えていました。そして、誰もが貧弱な隠された入力が必要だと非難していましたが、フィールドセット内にあなたの必須フィールドがあるバグのようです。 Chromeは、（何らかの理由で）必要な入力ではなくフィールドセットに焦点を合わせようとします。

このバグはchromeにのみ存在します。バージョン43.0.2357.124 mでテストしました。Firefoxでは発生しません。

例（非常に簡単）。

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

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

通常、フィールドセットには名前がないため、name=''はWTFであるため、バグを見つけるのは困難です。犯人が見つかるまでフォームを1つずつスライスします。フィールドセットから必要な入力を取得すると、エラーはなくなります。

<form>
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>

  <fieldset name="mybug">
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

報告しますが、バグのコミュニティchromeがどこにあるかわかりません。

18
Neto Yo

この投稿のおかげで、入力フィールドの代わりにフィールドセットに焦点を合わせようとするChrome=.

コンソールからより良い応答を得るには：

  • すべてのDOM要素に新しい名前を割り当てます
  • すべての入力を設定し、style.displayを「ブロック」に選択します

  • Input [type = "hidden"]要素のタイプを「text」に変更しました

    function cleanInputs(){
    var inputs  = document.getElementsByTagName( 'input' ),
        selects = document.getElementsByTagName( 'select' ),
        all     = document.getElementsByTagName( '*' );
    for( var i=0, x=all.length; i<x; i++ ){
        all[i].setAttribute( 'name', i + '_test' );
    }
    for( var i=0, x=selects.length; i<x; i++ ){
        selects[i].style.display = 'block';
    }
    for( var i=0, x=inputs.length; i<x; i++ ){
        if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
            inputs[i].setAttribute( 'type', 'text' );
        }
        inputs[i].style.display = 'block';
    }
    return true;
}

コンソールでcleanInputs（）を実行し、フォームを送信しました。コンソールからの結果は次のとおりです。

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

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

次に、Web開発者の「要素」ビューに切り替えると、「28_test」と「103_test」（両方のフィールドセット）が見つかりました-私の問題がフィールドセット内にネストされた必須入力フィールドであることを確認しました。

5
Doug

質問を書いている間に、私は1つのことに気付きました。スクリプトが「priceFinal」フィールドに入れていた値は、時々10進数でした。

この場合の解決策は、この入力のステップ属性を記述することでした。

... step="any" ...

w3sのステップ

したがって、この「フォーカスできない」バグは、必須フィールドおよび非表示フィールドの問題であるだけでなく、フォーマットの競合によっても発生します。

1
nach

私は同じ問題を抱えていたので、厄介なフィールドからrequired = "required"を削除しました。

1
iltaf khalid

Nachは私に最高のポインターを与えました...（y）また、step = "0.1"の入力type = "number"があり、検証中にコンソールにこのエラーが表示されます：name = ''の無効なフォームコントロールはフォーカスできません。

要素のstep = "0.1"を削除すると、フォームを検証できます

1
Sjoerd

JQuery関数の実行時にエラーが発生する場合は、関数に「return false」を設定するか、function（e）{e.preventDefault（）; ...}

1
acarayol

これが解決策です...

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

falseをng-requiredに渡すとディレクティブが無効になることを多くの人は理解していません。

0
Mohammad Amir

この問題は一度ありました。修正するには、追加

novalidate

フォームの属性として。例えば

<form action="" novalidate>
....
</form>
0
Canaan Etai