邮件表单Ajax验证无效

Question

I am using a simple HTML form with an ajax validation, and php to mail, however It keeps giving me the error that the message was not sent. If I disable the ajax the form will go through. What can I do to fix this issue?

HTML form:

<form method="POST" action="/tj/send.php">
                                                    <p>
                                                        <label for="name">Name <span class="required">*</span></label>
                                                        <input type="text" name="name" id="name">
                                                    </p>
                                                    <p>
                                                        <label for="email">Email <span class="required">*</span></label>
                                                        <input type="text" name="email" id="email">
                                                    </p>
                                                    <p>
                                                        <label for="subject">Subject</label>
                                                        <input type="text" name="subject" id="subject">
                                                    </p>
                                                    <p>
                                                        <label for="subject">Message <span class="required">*</span></label>
                                                        <textarea name="message" id="message" cols="45" rows="10"></textarea>
                                                    </p>
                                                    <div class="fBtn">
                                                        <button type="submit" name="submit" id="submit" class="regButton"><i class="icon-paper-plane"></i>Send Message</button>
                                                    </div>
                                                </form>
                            <div id="success"><h2>Your message has been sent. Thank you!</h2></div>
                        <div id="error"><h2>Sorry your message can not be sent.</h2></div>
                                        </div>          

AJAX Validation:

$('#submit').click(function(){ 

$('input#name').removeClass("errorForm");
$('textarea#message').removeClass("errorForm");
$('input#email').removeClass("errorForm");

var error = false; 
var name = $('input#name').val(); 
if(name == "" || name == " ") { 
    error = true; 
    $('input#name').addClass("errorForm");
}


    var msg = $('textarea#message').val(); 
    if(msg == "" || msg == " ") {
        error = true;
        $('textarea#message').addClass("errorForm");

    }

var email_compare = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; 
var email = $('input#email').val(); 
if (email == "" || email == " ") { 
    $('input#email').addClass("errorForm");
    error = true;
}else if (!email_compare.test(email)) { 
    $('input#email').addClass("errorForm");
    error = true;
}

if(error == true) {
    return false;
}

var data_string = $('.contactForm form').serialize(); 


$.ajax({
    type: "POST",
    url: $('.contactForm form').attr('action'),
    data: data_string,

    success: function(message) {
                console.log("AJAX Error:" + message);
            if(message == 'SENDING'){
                $('#success').fadeIn('slow');
            }
            else{

                $('#error').fadeIn('slow');
            }
                }



});

return false; 
});

PHP:

    <?php
/* Code by David McKeown - craftedbydavid.com */
/* Editable entries are bellow */
$send_to = "[e-mail]";
$send_subject = "trishajohnson.net form";

/*Be careful when editing below this line */
$name = cleanupentries($_POST["name"]);
$email = cleanupentries($_POST["email"]);
$subject = cleanupentries($_POST["subject"]);
$message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];



function cleanupentries($entry) {
    $entry = trim($entry);
    $entry = stripslashes($entry);
    $entry = htmlspecialchars($entry);
    return $entry;
}
$message = "This email was submitted on " . date('m-d-Y') . 
"

Name: " . $name .
"

E-Mail: " . $email . 
"

Message: 
" . $message . 
"


Technical Details:
" . $from_ip . "
" . $from_browser;
$send_subject .= " - {$name}";
$headers = "From: " . $email . "
" .
    "Reply-To: " . $email . "
" .
    "X-Mailer: PHP/" . phpversion();

/* Send the message using mail() function */
mail($send_to,$send_subject,$message);
?>

Answer 1

it sounds like 2 separate problems. The form submission, and the email actually sending.

I can speak to php failing in sending email. (sorry castis I didn't see your comment until after I submitted my answer).

There should be more code there, perhaps using the php mail command (with parameters), or for even better chances of the recipient actually getting the email, use an SMTP mail, typically set up by server admin.

Also, try console.log(message), just above the line if (message == 'SENDING').

Also, in what part of the code is any value the string 'SENDING'? Your if statement may just be evaluating to false for that reason alone.

As you mentioned in comment, the output of your console.log of line 111 was AJAX Error: script.js:111 This is indicating that message is empty, nothing. Hence, your if statement if (message == 'SENDING') will indeed evaluate to false. I would try revising your code so as to have 2 callbacks, success and error.

success: function(data) {
  $('#success').fadeIn('slow');
},
error: function(xhr) {
  $('#error').fadeIn('slow');
}

For more info, I found this useful: http://hayageek.com/jquery-ajax-post/