jQuery Form Validierung (wenn == "" dies tun) funktioniert nur bei der ersten Eingabe

Question

Ich habe ein Formular, das ich jQuery verwenden, um zu validieren, dass die Eingaben nicht leer sind. (Ich verwende auch Bootstrap)

<form action="" method="post"> 
    <div id="name_input" class="form-group"> 
    <input id="name" type="text" name="name" placeholder="Name"> 
    <span class="glyphicon glyphicon-remove form-control-feedback name_span></span> 
    </div> 
    <div id="email_input" class="form-group"> 
    <input id="email" type="email" name="email" placeholder="Email"> 
    <span class="glyphicon glyphicon-remove form-control-feedback email_span></span> 
    </div> 
    <input type="submit" name="submit" value="save"> 
</form> 

mit jQuery

$(document).ready(function() { 
    $('.form-control-feedback').hide(); 
    $(".submit").click(function() { 
    var name = $("#name").val(); 
    if (name == "") { 
     $("#name_input").addClass("has-error has-feedback"); 
     $(".name_span").show(); 
     return false; 
    } 
    var email = $("#email").val(); 
    if (email == "") { 
     $("#email_input").addClass("has-error has-feedback"); 
     $(".email_span").show(); 
     return false; 
    } 
    }); 
}); 

, wenn ich diesen Code verwenden und beide Eingänge sind leer, die Klassen „hat-Fehler“ und „hat Feedback“ nur anhängen zum ersten Eingang.

Wenn die erste Eingabe ausgefüllt ist und die zweite leer ist, fügt die Klasse die zweite hinzu, und wenn ich auch die erste leere, bekomme ich auch die Klassen.

aber wenn ich das anders herum mache, so ist der erste zuerst leer und der zweite Eingang ist leer, danach fügen die Klassen nur noch den ersten hinzu.

Auch wenn ich einen von ihnen in füllen, möchte ich removeClass aber ich kann das nicht mit:

} else { 
    $("#name_input").removeClass("has-error has-feedback"); 
    $(".name_span").hide(); 
} 

da, dass die Form und offensichtlich einreichen kann ich nicht return false; seit dem Willen hinzufügen Verhindere, dass das Formular verarbeitet wird, selbst wenn es ausgefüllt ist ... Irgendwelche Vorschläge zu diesen?

Answer 1

Eine Anweisung return stoppt sofort die Ausführung einer Funktion. Also dieser Code hier

if (name == "") { 
    $("#name_input").addClass("has-error has-feedback"); 
    $(".name_span").show(); 
    return false; 
} 
var email = $("#email").val(); 
if (email == "") { 
    $("#email_input").addClass("has-error has-feedback"); 
    $(".email_span").show(); 
    return false; 
} 

sagt, dass, wenn name == "", nicht einmal die E-Mail bewerten. Stattdessen sollten Sie möglicherweise ein Flag verwenden, um festzustellen, ob Fehler aufgetreten sind.

var dataIsValid = true; 
var name = $("#name").val(); 
if (name == "") { 
    $("#name_input").addClass("has-error has-feedback"); 
    $(".name_span").show(); 
    dataIsValid = false; 
} 
var email = $("#email").val(); 
if (email == "") { 
    $("#email_input").addClass("has-error has-feedback"); 
    $(".email_span").show(); 
    dataIsValid = false; 
} 

return dataIsValid; 

Wie @ imvain2 wies darauf hin, Sie werden auch die Fehlerklassen entfernen möchten. Andernfalls, sobald Sie einmal einen Fehler erhalten, sieht es immer so aus, als hätten sie einen Fehler.

Answer 2

Sie geben den ersten Fehler zurück. Wenn Sie durch jede Liste auflisten möchten, müssen Sie die einzelnen Return-Anweisungen entfernen.

$(document).ready(function() { 
    $('.form-control-feedback').hide(); 
    $(".submit").click(function() { 
    var name = $("#name").val(), 
     errorMsg = []; 

    if (name == "") { 
     $("#name_input").addClass("has-error has-feedback"); 
     $(".name_span").show(); 
     errorMsg.push('Invalid Name'); 
    } 
    var email = $("#email").val(); 
    if (email == "") { 
     $("#email_input").addClass("has-error has-feedback"); 
     $(".email_span").show(); 
     errorMsg.push('Invalid Email'); 
    } 
    if (errorMsg.length > 0){ 
     // alert('Errors:\n' + errMsg.join('\n')); 
     return false; 
    } 
    }); 
});