单击提交按钮后，如何使用jQuery淡化表单并在成功时显示消息？

Question

I have an html form, in order to validating and process the form I use the php code in the sendmail.php and jQuery in the scripts.js.

php code:

if($_POST) {

    // Enter the email where you want to receive the message
    $emailTo = 'monareng.mji@gmail.com';

    // Form fields
    $clientName = addslashes(trim($_POST['name']));
    $clientEmail = addslashes(trim($_POST['email']));
    $number = addslashes(trim($_POST['number']));
    $message = addslashes(trim($_POST['message']));

    // Email Ssubject
    $subject = 'Query from My Domain (AGISANANG Design & Build)';

    // Compose message to send
    $sendMessage = 'Hi' . "\n\n";
    $sendMessage .= $message . "\n\n";
    $sendMessage .= 'From: ' . $clientName . "\n";
    $sendMessage .= 'Email: ' . $clientEmail . "\n";
    $sendMessage .= 'Contact number: ' . $number . "\n";

    $array = array();
    $array['nameMessage'] = '';
    $array['emailMessage'] = '';
    $array['numberMessage'] = '';
    $array['messageMessage'] = '';

    if($clientName == '') {
        $array['nameMessage'] = 'Please enter your full name.';
    }
    if (filter_var($clientEmail, FILTER_VALIDATE_EMAIL) == false) {
        $array['emailMessage'] = 'Please insert a valid email address.';
    } 
    if (!preg_match('/^(\+?)+([0-9]{10,})$/', $number)) {
        $array['numberMessage'] = 'Please enter a valid contact number.';
    }
    if($message == '') {
        $array['messageMessage'] = 'Please enter your message.';
    }

    $isValid = empty($array['nameMessage']) && empty($array['emailMessage']) &&
               empty($array['numberMessage']) && empty($array['messageMessage']);   

    if($isValid) {
        // build headers and send mail
        // Headers
        $headers = "From: " . $clientName . ' <' . $clientEmail . '>' . "\r\n";
        $headers .= "CC: " . 'Monareng Innocent <innocent@agisanang.co.za>' . "\r\n";
        $headers .= PHP_EOL;
        $headers .= "MIME-Version: 1.0".PHP_EOL;
        $headers .= "Content-Type: multipart/mixed;".PHP_EOL;
        $headers .= " boundary=\"boundary_sdfsfsdfs345345sfsgs\"";

        // Send mail
        mail($emailTo, $subject, $sendMessage, $headers);
    }   else {
            //echo the error messages
            echo json_encode($array); 
    }

}   else {
        header ('location: index.html#contact');
    }

?>

jQuery:

$('.contact-form form').submit(function(e) {
    e.preventDefault();

    var form = $(this);
    var nameLabel = form.find('label[for="contact-name"]');
    var emailLabel = form.find('label[for="contact-email"]');
    var numberLabel = form.find('label[for="contact-number"]');
    var messageLabel = form.find('label[for="contact-message"]');

    nameLabel.html('Full name');
    emailLabel.html('Email');
    numberLabel.html('Contact number');
    messageLabel.html('Message');

    var postdata = form.serialize();

    $.ajax({
        type: 'POST',
        url: 'sendmail.php',
        data: postdata,
        dataType: 'json',
        success: function(json) {
            if(json.nameMessage !== '') {
                nameLabel.append(' - <span class="red error-label"> ' + json.nameMessage + '</span>');
            }
            if(json.emailMessage !== '') {
                emailLabel.append(' - <span class="red error-label"> ' + json.emailMessage + '</span>');
            }
            if(json.numberMessage !== '') {
                numberLabel.append(' - <span class="red error-label"> ' + json.numberMessage + '</span>');
            }
            if(json.messageMessage !== '') {
                messageLabel.append(' - <span class="red error-label"> ' + json.messageMessage + '</span>');
            }
            if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
                form.fadeOut('fast', function() {
                    form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
                });
            } 
        }
    });
});

After validating inputs filled and find that the everything is in order: the form is supposed to fade away and message "Thanks for contacting us! We will get back to you very soon." must appear, however, that is not happening! When you click submit button the fields are validated but the form doesn't fade and the message doesn't appear as desired.

How can I edit the code below from the scripts.js so that it fires when all input fields are filled correctly?

if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
     form.fadeOut('fast', function() {
          form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
     });
} 

Answer 1

$("#frmDemo").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var comment = $("#comment").val();

if(name == "" || comment == "" ) {
    $("#error_message").show().html("All Fields are Required");
} else {
    $("#error_message").html("").hide();
    $.ajax({
        type: "POST",
        url: "post-form.php",
        data: "name="+name+"&comment="+comment,
        success: function(data){
            $('#success_message').fadeIn().html(data);
            setTimeout(function() {
                $('#success_message').fadeOut("slow");
            }, 2000 );

        }
    });
}
})
</script>   

Check Here

Answer 2

if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
     $(form).fadeOut('fast', function() {
          form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
     });
} 

A '$' was missing under this to select the "form"