フォーム検証エラー：送信ボタンをクリックするたびに、errorDivにエラー結果が追加されます

Question

ユーザーが必須フィールドを入力したかどうかを確認するフォームとスクリプトを作成しました。ただし、Submitボタンを押すたびに、検証のために作成したエラーのリストが追加されます。ここで

var error = ""; 
var subject = $("#subject").val(); 
var email = $("#email").val(); 
var content = $("#content").val(); 
var errorDiv = $("#errorText"); 

//option A 
$("form").submit(function(e){ 

    if (email == ""){ 
     error += "Please enter a valid email <br>"; 
    } 

    if (subject == ""){ 
     error += "<p>The Subject field is required <br>"; 
    } 


    if(content == ""){ 
     error+= "Please enter details <br>" 
    } 

    if(error != ""){ 
     errorDiv.html('<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' + error + '</div>'); 
     return false; 
    } 
    else{ 
     return true; 
    } 

}); 

はあなたがerrorを初期化していない私は enter image description here

Answer 1

を経験してるものの画像です。ローカル変数として宣言していないので、それはグローバル変数なので、以前の検証から値を保持し続けます。

また、入力フィールド値を含む変数も関数で設定する必要があります。それ以外の場合は、ユーザーがフォームを送信したときではなく、ページが読み込まれたときの値が含まれます。

$("form").submit(function(e) { 
 
    var error = ""; 
 
    var subject = $("#subject").val(); 
 
    var email = $("#email").val(); 
 
    var content = $("#content").val(); 
 

 
    if (email == "") { 
 
    error += "Please enter a valid email <br>"; 
 
    } 
 

 
    if (subject == "") { 
 
    error += "<p>The Subject field is required <br>"; 
 
    } 
 

 
    if (content == "") { 
 
    error += "Please enter details <br>" 
 
    } 
 

 
    if (error != "") { 
 
    errorDiv.html('<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' + error + '</div>'); 
 
    return false; 
 
    } else { 
 
    return true; 
 
    } 
 

 
});