Formularvalidierung zeigt nur die erste Fehlermeldung

Question

ich eine Form bin Validierung und ich kann nur die erste Fehlermeldung angezeigt:

ContactUs.prototype.desktopErrors = function(){ 
    var THIS = this; 

    THIS.$el.find('#submit').on('click', function(){ 
      if (!$('#firstName').val().length) { 
       $('.nameErrs li').text("We can't verify your name") 
      } else if (!$('#lastName').val().length) { 
       $('.nameErrs li').text("We can't verify your last name") 
      } else if (!$('#emailAddress').val().length) { 
       $('.emailErrs li').text("We can't verify your email address") 
      } else if (!$('#lastName').val().length) { 
       $('.emailErrs li').text("We can't verify the subject") 
      } 
     }); 

    return THIS; 
}; 

das ist JADE:

.row 
     .form-group 
      label.first_name_label(for="firstName") First Name* 
      input.first_name_input(required type="text" class="form-control" id="firstName") 

     .form-group 
      label.last_name_label(for="lastName") Last Name* 
      input.last_name_input(required type="text" class="form-control" id="lastName") 

     ul.nameErrs 
      li.full 

    .row 
     .form-group 
      label.email_address_label(for="emailAddress") Email Address* 
      input.email_address_input(required type="email" class="form-control" id="emailAddress") 

     .form-group 
      label.(for="subject") Subject* 
      input.(required type="text" class="form-control" id="subject") 

     ul.emailErrs 
      li.full 

Also, wenn alle Felder sind leer, ich kann nicht alle Fehlermeldungen anzeigen, nur die erste.

Vorschläge?

Answer 1

if else ist ein nicht schnell logisches Konstrukt

Sie brauchen nur if blocks für alle Felder

THIS.$el.find('#submit').on('click', function(){ 
    if (!$('#firstName').val().length) { 
     $('.nameErrs li').text("We can't verify your name") 
    } 
    if (!$('#lastName').val().length) { 
     $('.nameErrs li').text("We can't verify your last name") 
    } 
    if (!$('#emailAddress').val().length) { 
     $('.emailErrs li').text("We can't verify your email address") 
    } 
    if (!$('#lastName').val().length) { 
     $('.emailErrs li').text("We can't verify the subject") 
    } 
}); 

Answer 2

Trennen Sie else if Logik zu verwenden. Fügen Sie dann Text hinzu, um ihn nicht zu überschreiben.

THIS.$el.find('#submit').on('click', function(){ 
    $('.nameErrs li').text(""); 
    $('.emailErrs li').text(""); 

    if (!$('#firstName').val().length) { 
     $('.nameErrs li').text("We can't verify your name") 
    } 
    if (!$('#lastName').val().length) { 
     $('.nameErrs li').text($('.nameErrs li').text() + "We can't verify your last name") 
    } 
    if (!$('#emailAddress').val().length) { 
     $('.emailErrs li').text("We can't verify your email address") 
    } 
    // FYI: in your snippet this is a reevaluation of lastname 
    if (!$('#subject').val().length) { 
     $('.emailErrs li').text($('.emailErrs li').text() + "We can't verify the subject") 
    } 
});