javascript - 検証後の最初のフィールドを指す

Question

チェックボックス、入力フィールド、ドロップダウンなどがあるWebページがあります。

必須条件は、javascriptを使用してチェックされます。誰かがこれらのフィールドに入力しなかった場合は、次のボタンの検証エラーポップアップを押してください。

今私が達成したいのは、誰かが必須フィールドに情報を入力しなかった場合、カーソルはエラーの原因となった最初のフィールドに移動する必要があるということです。

誰かが私にこれを行う方法を提案できますか？

score 2 · Accepted Answer

input-error無効なフィールドごとにクラス（のようなもの）を追加します。次に、次のようなものを使用します。

var errors = document.querySelectorAll(".input-error");
if (errors.length > 0) {
    errors[0].focus();
}

次に例を示します：http：//jsfiddle.net/NtHzV/1/

それは実際には、コードの構造、検証方法、検証で実際に行っていること、およびHTMLが何であるかに依存します。

同時に、私の例と同様のことをしている場合は、エラーのある最初の入力を追跡し、focus()検証の最後にそれを追跡することもできます。このようなもの：

アップデート：

ベルギは、エラーのある最初の入力のみを探しているので、querySelector（の代わりに）使用したほうがよいと指摘しました。querySelectorAllだからここに更新があります：

var error_input = input_area.querySelector(".input-error");
if (error_input !== null) {
    error_input.focus();
}

仕様は次のquerySelectorとおりです。https ： //developer.mozilla.org/en-US/docs/DOM/element.querySelector-<IE8はサポートしていないことに注意してください。

の使用".input-error"は、それがCSSクラスセレクターであり、クラス「input-error」を持つ特定の領域の最初の（存在する場合）要素を見つけるためです。

score 1 · Accepted Answer

この行は、指定した要素にページをフォーカスします。これを検証チェックに実装して、不良要素に焦点を当てることができるはずです。

document.getElementById("ID_Of_bad_field").focus();

2 に答える 2