troubleshooting Question

How to hide contact form only if no validation errors

Avatar of Black Sulfur
Black SulfurFlag for South Africa asked on
PHPAJAXjQuery
4 Comments1 Solution528 ViewsLast Modified:
I am getting confused by all these different variations i.e.: success/done/promise and can't figure out how to change this code so that if there are validation errors, the form will not disappear but if there are no validation errors and the form is submitted, then the success message must appear and the form disappears. Currently, whether validation errors or none, the validation/success message shows and the form disappears.


This question already has an answer here:
what is difference between success and .done() method of $.ajax 4 answers
I want the form to still show and allow input if a failed validation occurs but if all succeeds then I want the success message to show and the form to disappear. This code hides the form whether success or validation errors occur.

$(document).ready(function(){
        $( "#send" ).click(function(e){
            e.preventDefault();
            $( "#send" ).prop( "disabled", true );
            $( ".hideloader" ).show();
            $( "#send" ).html( "Sending <img src='img/ajax-loader.gif'>" );
            var form_data = $( "#contact-form" ).serialize();
            $.ajax({
                type: 'POST',
                url: 'contact-submit.php',
                data: form_data
            }).done(function(response) {
                $( "#server-results" ).hide().html(response).fadeIn("slow");
                $( "#send" ).prop("disabled", false);
                $( "#send" ).html( "Send Enquiry" );
                $( "#contact-form" ).hide();
        });
    });
});

My php code just using an email field as an example looks like this:

if ($_SERVER["REQUEST_METHOD"] === "POST") {

$message = "";

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) {

    $message .= "Invalid email address. <br/>";
}

if($message) {

    echo "<div class='red-error'><b>There were errors in your form:</b> <br/>" . $message . "</div>";

    } else {

    echo "<div class='green-success'>Thank you. We will respond to your enquiry as soon as possible.</div>";

    }
}

If there are validation errors server side then it should show the error with red background, if no validation errors and form submits, then message with green background should show and I can then send email, hide the form etc.
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros