Javascript 表单验证仅显示第一条错误消息

我正在验证表单，只能显示第一条错误消息：

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;
};

这是玉：

    .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

因此，如果所有字段都为空，则I无法显示所有错误消息，仅显示第一条

---

建议？

如果else

是一个快速失效的逻辑结构

对于所有字段，只需使用

if块

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")
    }
});

---

if-else

是一种快速失效的逻辑结构

对于所有字段，只需使用

if块

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")
    }
});

---

如果逻辑，请断开您的

逻辑。然后追加文本以避免覆盖

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")
    }
});

如果

逻辑，请断开您的

逻辑。然后追加文本以避免覆盖

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")
    }
});