JS->入力のフォーム検証。 forループを使用してすべての入力を取得するindex

Question

私は4つの入力を持つフォームを持っており、送信時に警告を表示したい。私がしたことは、すべての入力の下でdisplay：noneで警告を作成していることです。 CSSで。

これ以降、すべての入力のインデックスを取得し、警告を表示するif文を適用するために、JSでforループを作成しました。=== null || は私のフォームにもquerySelector("THE CLASS").style.display="block";

を作るために、変数を使用して===「」私は私が私のフォームに示されているだけアラートを送信したときに私の問題がある

<form method="post" class="q-form" name="form" onsubmit="return validate()">

があり、このラインを持っています1つはUsernameの下にあり、それが表示された後にもforループが次の入力に行くと思うので消えます。

明確にする必要がある場合はお知らせください。 https://jsbin.com/kazopahuga/1/edit?html,js,output

あなたはJS

でプレスランを示す警告を表示する場合は、ありがとうございました。ここで

あなたはすべてのコードを持っています！ここで

Answer 1

私はあなたのvalidare()機能にいくつかの変更を提案：

は、フォーム全体が有効であるかどうかを示すフラグを追加し、あなたは無効である入力を見つけるまで、それは本当だと仮定します。このフラグの値を返します。

var isValid = true;

あなたの入力のような指標によってそれらにアクセスできるようにもあなたの検証メッセージをキャプチャ：あなたは無効な入力を見つけた場合

messages = document.getElementsByClassName(' alert alert-danger custom');

、関連するメッセージを表示し、有効フラグを更新偽にする。ここで

if (currentInputValue == null || currentInputValue === "") { 
    messages[index].style.display = "block"; 
    isValid = false; 
} 

は更新関数である。

function validare() { 

    var inputs, messages, index; 
    var isValid = true; 

    inputs = document.getElementsByTagName('input'); 
    messages = document.getElementsByClassName(' alert alert-danger custom'); 

    for (index = 0; index < inputs.length; ++index) { 
     var currentInputValue = inputs[index].value; 
     if (currentInputValue == null || currentInputValue === "") { 
      messages[index].style.display = "block"; 
      isValid = false; 
     } 
    } 

    return isValid; 
} 

Updated jsbin here

Answer 2

更新のソリューションです：jsbin

あなたはquerySelectorを使用し、それは同じクラスで見つかった最初の要素だけを返す、あなたはすべてのセレクタを返すquerySelectorAllを使用している必要があります。