删除表单提交按钮并替换为加载 gif

我有一个带有提交按钮的表单，想删除该按钮并将其替换为加载的 gif 图像。我不希望这只在点击时发生，因为表单已经过验证，我希望只有在正确填写所有输入字段时按钮才会消失，以便 gif 图像显示进度。我该怎么做？

注意：这也不是成功时触发的事件，我希望它成为一个进度指示器。成功后，表单会淡出并显示一条消息："感谢您与我们联系！我们会尽快回复您..."下面的jQuery已经处理了这个问题。

这是 php 代码：

<?php
// Email address verification
function isEmail($email) {
    return preg_match('|^[_a-z0-9-]+('.[_a-z0-9-]+)*@[a-z0-9-]+('.[a-z0-9-]{2,})+$|i', $email);
};
if($_POST) {
    // Enter the email where you want to receive the message
    $emailTo = 'example@gmail.com';
    $clientName = addslashes(trim($_POST['name']));
    $clientEmail = addslashes(trim($_POST['email']));
    $number = addslashes(trim($_POST['number']));
    $message = addslashes(trim($_POST['message']));
    $subject = 'Query from My Domain';
    $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(!isEmail($clientEmail)) {
        $array['emailMessage'] = 'Please insert a valid email address.';
    }
    if($number == '') {
        $array['numberMessage'] = 'Please enter a valid contact number.';
    }
    if($message == '') {
        $array['messageMessage'] = 'Please enter your message.';
    }
    if($clientName != '' && isEmail($clientEmail) && $message != '') {
    // Send email
    $headers = "From: " . $clientName . ' <' . $clientEmail . '>' . "'r'n";
    $headers .= PHP_EOL;
    $headers .= "MIME-Version: 1.0".PHP_EOL;
    $headers .= "Content-Type: multipart/mixed;".PHP_EOL;
    $headers .= " boundary='"boundary_sdfsfsdfs345345sfsgs'"";
    mail($emailTo, $subject, $sendMessage, $headers);
    }
    echo json_encode($array);
}   else {
        header ('location: index.html#contact');
}
?>

这是jQuery：

// Contact form
$('.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>');
                });
            } 
        }
    });
});