Ajax Failure Response in Contact Form

Question

I've gotten my contact form to display the success message and the loading bar upon submitting, but for some reason, the failure message will not display. It just continues to show the loading bar.

I tried using both of the below, and they didn't do the trick. The failure message should display if required fields aren't filled or e-mail is invalid. Any help is much appreciated.

What I tried:

   else if(response == 'failure'){
statusdiv.html('<p class="ajax-success" >Please sure all required information is entered and try again.</p>');
}

 else {
statusdiv.html('<p class="ajax-success" >Please sure all required information is entered and try again.</p>');
}

Full Code:

  <script type="text/javascript" >
function cvf_form_validate(element) {
    $('html, body').animate({scrollTop: $(element).offset().top-100}, 150);
    element.effect("highlight", { color: "#F2DEDE" }, 1500);
    element.effect('shake');
}

jQuery(document).ready(function($) {
var placeholder=$('#status-placeholder');
jQuery('<div id="comment-status"></div>').insertBefore(placeholder);
var statusdiv=$('#comment-status');

    $('body').on('click', '.submit', function() {
       statusdiv.html('<div class="wrap go"><div class="loader bar"><div class="sfmgreen"></div><div class="dkblue"></div><div class="ltblue"></div><div class="aqua"></div></div>');

        if($('.input-name').val() === '') {
            cvf_form_validate($('.input-name'));

        } else if($('.input-email').val() === '') {            
            cvf_form_validate($('.input-email'));

        } else if($('.input-message').val() === '') {              
            cvf_form_validate($('.input-message'));

        } else {
            var data = {
                'action': 'cvf_send_message',
                'name': $('.input-name').val(),
                'email': $('.input-email').val(),
                'message': $('.input-message').val()
            };

            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
            $.post(ajaxurl, data, function(response) {
                if(response === 'success'){
                    statusdiv.html('<p class="ajax-success" >Thanks! Your message has been sent successfully.</p>');
                    $('.input-name').val(''); $('.input-email').val(''); $('.input-message').val('');
                }
                else if(response == 'failure'){
statusdiv.html('<p class="ajax-success" >Please sure all required information is entered and try again.</p>');
}
            });
        }
    });
});
</script>

Answer 1

Thanks so much for your help and patience! I was able to figure it out.

Instead of adding the error callback after the success handler, I needed to add it after each input. This allows the error to define which fields are missing and specify for the user what to do.

if($('.input-name').val() === '') {
    statusdiv.html('<p class="ajax-error" >Please fill out your name and try again.</p>'); response.status;

} else if($('.input-email').val() === '') {            
    statusdiv.html('<p class="ajax-error" >Please fill out your e-mail and try again.</p>'); response.status;

} else if($('.input-message').val() === '') {              
    statusdiv.html('<p class="ajax-error" >Please add a message and try again.</p>'); response.status;

}