Form Not Submitting When Trying To Use JQuery's SubmitHandler

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 su

Solution 1:

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.