Form not submitting when trying to use jQuery'

Question

I am converting a contact form to AJAX, so that I can do the success function. Right now the code is stopping at the submitHandler section saying that it is undefined. How is my submitHandler not defined?

submitHandler(function(form) {

Am I doing this in the correct way, though? I want to use my current php because I built it to be back-end validation on-top of the jQuery validation.

Does anyone see what is wrong with the submitHandler and anything that may be preventing this from sending?

HTML

<div class="contact-container">
    <form id="contactform" method="post" action="" novalidate>
        <?php 
            if($sent === true) {
                echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>";
            } elseif($hasError === true) {
                echo '<ul class="errorlist">';
                foreach($errorArray as $key => $val) {
                    echo "<li>" . ucfirst($key) . " field error - $val</li>";
                }
                echo '</ul>';
            }
        ?>
        <div>
        <input type="text" class="contact_input" name="name" id="name" value="<?php echo (isset($name) ? $name : ""); ?>" placeholder="Name">
        </div>
        <div>
        <input type="email" class="contact_input" name="email" id="email" value="<?php echo (isset($email) ? $email : ""); ?>" placeholder="Email">
        </div>
        <div>
        <textarea name="message" class="contact_input" id="message" placeholder="Message"><?php echo (isset($message) ? $message : ""); ?></textarea>
        </div>
        <input type="submit" id="submit_contact" class="clear" name="submitform" value="Send">
    </form>
</div>
<div class="contact-email-success">
    <div class="contact-email-success-container">
        <div id="contact-email-success-title">THANK YOU FOR CONTACTING OUR AGENCY!</div>
        <div id="contact-email-success-description">Your submission has been received and one of our team members will contact you shortly.</div>
    </div>
</div>

jQuery

//Send the project email
$(document).ready(function(){ 
    $("#submit_contact").on("click", function (event) {
        //event.preventDefault();

        $("#contactform").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                name: {
                    required: "Please enter your name",
                    minlength: "Your name seems a bit short, doesn't it?"
                },
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                message: {
                    required: "Please enter your message",
                    minlength: "Your message seems a bit short. Please enter at least 5 characters"
                }
            }
        });

        submitHandler(function(form) {

            //Variables for the form ids
            var name    = $("#name").val();
            var email   = $("#email").val();
            var message = $("#message").val();


                $.ajax({
                    url: "email-contact.php", 
                    type: "POST",
                    data: {
                        "project_name": name,
                        "title_roll":   email,
                        "project_email": message
                    },
                    success: function (data) {
                        //console.log(data); // data object will return the response when status code is 200
                        if (data == "Error!") {
                            alert("Unable to send email!");
                            alert(data);
                        } else {
                            $(".contact-container").addClass("removeClass");
                            $(".contact-email-success").show();
                            $(".announcement_success").fadeIn();
                            $(".announcement_success").show();
                           // $('.announcement_success').html('Email Successfully sent!');
                           //$('.announcement_success').delay(5000).fadeOut(400);
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(textStatus + "|" + errorThrown);
                        //console.log("error"); //otherwise error if status code is other than 200.
                    }
                });
        }); 
    });
});

PHP

$hasError = false;
$sent = false;

$name       = $_POST['name'];
$email      = $_POST['email'];
$message    = $_POST['message'];

if(isset($_POST['submitform'])) {
    $name = trim(htmlspecialchars($_POST['name'], ENT_QUOTES));
    $email = trim(htmlspecialchars($_POST['email']));
    $message = trim(htmlspecialchars($_POST['message'], ENT_QUOTES));

    $fieldsArray = array(
        'name' => $name,
        'email' => $email,
        'message' => $message
    );

    $errorArray = array();

    foreach($fieldsArray as $key => $val) {
        switch ($key) {
            case 'name':
            case 'message':
            if(empty($val)) {
                $hasError = true;
                $errorArray[$key] = ucfirst($key) . " field was left empty.";
            }
            break;
            case 'email':
                if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                    $hasError = true;
                    $errorArray[$key] = "Invalid Email Address entered";
                } else {
                    $email = filter_var($email, FILTER_SANITIZE_EMAIL);
                }
                break;
        }
    }

    if($hasError !== true) {
        $to = "gsdfa";
        $subject = "Contact Form Submitted";
        $msgcontents = "Name: $name<br>Email: $email<br>Message: $message";
        $headers = "MIME-Version: 1.0 \r\n";
        $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
        $headers .= "From: $name <$email> \r\n";
        $emailsent = mail($to, $subject, $msgcontents,$headers);
        if($mailsent) {
            $sent = true;
            unset($name);
            unset($email);
            unset($message);
        }
    }
}

Answer 1

use this:

JQuery:

$(document).ready(function(){
   $("#submit_contact").click(function(){
         event.preventDefault();
        var name    = $("#name").val();
            var email   = $("#email").val();
            var message = $("#message").val();


                $.ajax({
                    url: "email-contact.php", 
                    type: "POST",
                    data: {
                        "project_name": name,
                        "title_roll":   email,
                        "project_email": message
                    },
                    success: function (data) {
                        //console.log(data); // data object will return the response when status code is 200
                        if (data == "Error!") {
                            alert("Unable to send email!");
                            alert(data);
                        } else {
                            $(".contact-container").addClass("removeClass");
                            $(".contact-email-success").show();
                            $(".announcement_success").fadeIn();
                            $(".announcement_success").show();
                           // $('.announcement_success').html('Email Successfully sent!');
                           //$('.announcement_success').delay(5000).fadeOut(400);
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(textStatus + "|" + errorThrown);
                        //console.log("error"); //otherwise error if status code is other than 200.
                    }
                });
   });
});

And in your php file change:

$name       = $_POST['name'];
$email      = $_POST['email'];
$message    = $_POST['message'];

into

$name       = $_POST['project_name'];
$email      = $_POST['title_roll'];
$message    = $_POST['project_email'];

hope its help

Answer 2

You need to define the submitHandler inside validate() function call. But you are just trying to execute it outside. Make it this way -

$("#contactform").validate({
        rules: {...},
        messages: {...},
        submitHandler: function(form) {
            //Variables for the form ids
            var name    = $("#name").val();
            var email   = $("#email").val();
            var message = $("#message").val();


            $.ajax({
                url: "email-contact.php", 
                type: "POST",
                data: {
                    "project_name": name,
                    "title_roll":   email,
                    "project_email": message
                },
                success: function (data) {
                    //console.log(data); // data object will return the response when status code is 200
                    if (data == "Error!") {
                        alert("Unable to send email!");
                        alert(data);
                    } else {
                        $(".contact-container").addClass("removeClass");
                        $(".contact-email-success").show();
                        $(".announcement_success").fadeIn();
                        $(".announcement_success").show();
                       // $('.announcement_success').html('Email Successfully sent!');
                       //$('.announcement_success').delay(5000).fadeOut(400);
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(textStatus + "|" + errorThrown);
                    //console.log("error"); //otherwise error if status code is other than 200.
                }
            });
        }
});

See the examples in submitHandler documentation.