Fehler-Label nur einmal zeigen Ereignis alle Eingaben sind leer

Question

Ich versuche, ein Formular mit Bedingungen zu erstellen, wenn einer von jedem input oder alle leer, wird span auf label erstellen.

HTML:

<form action="" method="post" role="form" accept-charset="utf-8" class="testform" > 
     <legend>test</legend> 
     <div class="form-group"> 
     <label for="username">username :</label> 
     <input type="text" id="username" class="form-control m-20"> 
     </div> 
     <div class="form-group"> 
     <label for="password">password :</label> 
     <input type="password" id="password" class="form-control m-20"> 
     </div> 
     <div class="form-group"> 
     <label for="repassword">re-type password :</label> 
     <input type="password" id="repassword" class="form-control m-20"> 
     </div> 
     <div class="form-group"> 
     <label for="email">Email :</label> 
     <input type="Email" id="email" class="form-control m-20"> 
     </div>       
     <button id="send" class="btn btn-primary"> 
     submit 
     </button> 
</form> 

Auf js Code. Ich versuche, den Hintergrund des Etiketts mit grün zu ändern, wenn die Eingabe leer ist und funktioniert.

Dann versuche ich die Span auf Etikett mit Voranstellen zu erstellen. aber wenn ich es ausführe, bekam nur die Label-E-Mail eine Spanne. wenn ich nur für email fülle. nur Repasswords Label bekam Spannweite. Ich habe das nicht gefunden, wenn ich Code nur für den Hintergrundwechsel verwende.

Wer findet was falsch ist. Dank

JS:

// button submit got clicked 
$('#send').on("click", function(){ 
    var input= $('.testform input'); 
    var empty= $("<span class=\"error\">empty</span>"); 
    // check input if have value if empty 
    input.each(function() { 
     var self=this; 
     var value=$(this).val(); 
     // if empty change color of label 
     if(value ==""){ 
      // $(self).parent(".form-group").find("label").prepend(empty); 
      $(self).parent(".form-group").find("label").css({"background": "green"}); 
     }else{ 
      $(self).parent(".form-group").find("label").css({"background": "white"}); 
     } 
    }); 
    return false; 
}); 

Answer 1

das geschehen, weil Sie das gleiche Element empty für alle Eingänge und das unmöglich so zugewiesen werden, nur um die letzte Eingabe zuzuordnen sind versuchen, so stattdessen sollten Sie clone das empty Element jedes Mal, wenn Sie wollen, dass es zuzuweisen:

$(this).parent(".form-group").find("label").prepend(empty.clone(true)); 

Hoffnung, das hilft.

$('#send').on("click", function(event){ 
 
    event.preventDefault(); 
 
    $('.error').remove(); 
 
    var $inputs= $('.testform input'); 
 
    var empty= '<span class="error">empty</span>'; 
 

 
    $inputs.each(function() { 
 
    var $this=$(this); 
 
    var value=$(this).val(); 
 

 
    if(value ==""){ 
 
     $this.parent(".form-group").find("label").prepend(empty); 
 
     $this.parent(".form-group").find("label").css({"background": "green"}); 
 
    }else{ 
 
     $this.parent(".form-group").find("label").css({"background": "white"}); 
 
    } 
 
    }); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" role="form" accept-charset="utf-8" class="testform" > 
 
    <legend>test</legend> 
 
    <div class="form-group"> 
 
    <label for="username">username :</label> 
 
    <input type="text" id="username" class="form-control m-20"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="password">password :</label> 
 
    <input type="password" id="password" class="form-control m-20"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="repassword">re-type password :</label> 
 
    <input type="password" id="repassword" class="form-control m-20"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="email">Email :</label> 
 
    <input type="Email" id="email" class="form-control m-20"> 
 
    </div>       
 
    <button id="send" class="btn btn-primary"> 
 
    submit 
 
    </button> 
 
</form>