We help IT Professionals succeed at work.

How to hide contact form only if no validation errors

Black Sulfur
Black Sulfur asked
on
515 Views
Last Modified: 2017-04-18
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();
        });
    });
});

Open in new window


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>";

    }
}

Open in new window


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.
Comment
Watch Question

Most Valuable Expert 2011
Author of the Year 2014

Commented:
It would be helpful to see the HTML markup that is in play here.

Author

Commented:
Ah, yes of course.

<form id="contact-form" method="post">
<div class="col-sm-6 col-xs-12">
	<label class="contact">Email Address*</label>
	<input type="email" name="email">
</div>
<div class="col-sm-6 col-xs-12">
	<label class="contact">First Name*</label>
	<input type="text" name="first_name">
</div>
<div class="col-sm-5 col-md-4 col-xs-6">
	<button id="send" type="submit" name="submit" class="btn btn--primary type--uppercase">Send Enquiry</button>
</div>
</form>
<div id="server-results"></div>

Open in new window

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.