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

Question

我有一个html表单，为了验证和处理该表单，我使用了sendmail.php中的php代码和scripts.js中的jQuery。

php代码：

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

验证输入内容后，发现一切都井井有条：表格应该消失了，并显示“感谢您与我们联系！我们将尽快与您联系”。 必须出现，但是，这没有发生！ 当您单击提交按钮时，字段将被验证，但表单不会消失，消息也不会显示为所需。

如何在scripts.js中编辑以下代码，以便在正确填写所有输入字段时触发？

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>   

在这里检查

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

在此情况下缺少“ $”来选择“表单”