Error messages when AJAX contact form doesn't post

Question

I have several contact forms using the same general AJAX code:

$(document).ready(function() {
    $('#mainMail').submit( function() {
        $.ajax({
            type: "POST",

            url : "<?php echo home_url(); ?>/wp-content/themes/retlehs-roots-f45f4f5/assets/bin/process.php",
            data: $(this).serialize(),
            success: function() {
                    $('#enquiryBox #submitSuccess').removeClass('hidden');
                    setTimeout(function() { $("#enquiryBox #submitSuccess").addClass('hidden'); }, 15000);       
                },
            error: function() {
                $('#enquiryBox #submitFail').removeClass('hidden');
                setTimeout(function() { $("#enquiryBox #submitFail").addClass('hidden'); }, 15000);
            }
            });
        return false;
    });
});

In short, when it successfully submits the form and emails me (via process.php) the #submitSuccess div DOES show up as it should. Problem is, when it fails, the div also shows up (the #submitFail div stays hidden).

I'm guessing that this is because the ajax post failure would only occur if the process.php isn't successfully called? Is there any way to adjust this so that if the email isn't sent to me via process.php, the user gets an error message?

Here's my process.php code:

<?php 

$robotest = $_POST['robotest']; //just testin' for robots

$recipient = "info@mydomain.com"; //recipient 
$email = ($_POST['email']); //senders e-mail adress 

if((filter_var($email, FILTER_VALIDATE_EMAIL)) && ($robotest == "")) { 

$Name = ($_POST['name']); //senders name 

$mail_body  = "Hello, \r\n \r\n";
$mail_body .= "You have received a new booking with the following details: \r\n\r\n";
$mail_body .= "{$_POST['comments']}; \r\n \r\n";
$mail_body .= "Please respond to the customer within 30 minutes on the following phone number: {$_POST['phone']} \r\n";
$mail_body .= "Warm regards, \r\n";
$mail_body .= "Robot. \r\n";



$subject = "Free Consult Inquiry"; //subject 
$header = "From: ". $Name . " <" . $email . ">\r\n"; //optional headerfields 

mail($recipient, $subject, $mail_body, $header); //mail command :) 

} else {
  print "You've entered an invalid email address!";
 }
?>

(the print "you've entered an invalid email address!" was my attempt at an error message, but that's not working either...)

Answer 1

Add this line $("#enquiryBox #submitSuccess").addClass('hidden'); into the error block as well,

  $.ajax({
        type: "POST",

        url : "<?php echo home_url(); ?>/wp-content/themes/retlehs-roots-f45f4f5/assets/bin/process.php",
        data: $(this).serialize(),
        success: function() {
                $('#enquiryBox #submitSuccess').removeClass('hidden');
                setTimeout(function() { $("#enquiryBox #submitSuccess").addClass('hidden'); }, 15000);       
            },
        error: function() {
            $('#enquiryBox #submitFail').removeClass('hidden'); //why do you remove class 'hidden' and add it later too ??
            $("#enquiryBox #submitSuccess").addClass('hidden'); //added line here
            setTimeout(function() { $("#enquiryBox #submitFail").addClass('hidden'); }, 15000);
        }
        });

Answer 2

You can indicate an error by returning an HTTP error code, eg

} else {
  header("HTTP/1.1 500 Internal error");
  print "You've entered an invalid email address!";
 }

Answer 3

If you read the manual entry on jQuery.ajax() , you'll find that the error event occurs when a protocol or network error occurs. If your script return false , null or anything like that, it is still considered a valid response, hence your problem.

In such a case, I would write it so that all calls end up calling one method, and if error event is called, it would call that same method with a rebuilt error message.