jQuery.validate plugin and ajax form submission

Question

I cannot for the life of me get this to work. The validation errors appear fine, I don\'t get syntax errors but nothing happens. The form just submits to the page. I can\'t

Answer 1

You have submitHandler within rules, it should be beside it, like this:

$(function() {
  $("#contact").validate({
      rules: {
          name: {required: true},
          email: {required: true},
          subject: {requred: true}
      },
      submitHandler: function(form) {
          $.ajax({
            type: "POST",
            url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
            data: $(form).serialize(),
            timeout: 3000,
            success: function() {alert('works');},
            error: function() {alert('failed');}
          });
          return false;
      }
  });
});

Also note the addition of the document.ready handler to be safe.

Answer 2

Take your submitHandler out of your rules :-)

$("#contact").validate({
                        rules: {
                        name: {required: true},
                        email: {required: true},
                        subject: {requred: true}
                        },
                        submitHandler: function() {
                            $.ajax({
                                type: "POST",
                                url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
                                data: formSerialize,
                                timeout: 3000,
                                success: function() {alert('works');},
                                error: function() {alert('failed');}
                            });

                            return false;
                        }
                    });

Answer 3

Just to help bring this post up-to-date.

Encapsulate with:

$(document).ready(function() { ALL YOUR CODE GOES HERE }

Remove submitHandler from rules:

rules: {
          name: {required: true},
          email: {required: true},
          subject: {requred: true}
      },
submitHandler: function(form) {.....

Add cache: false, to help prevent the browser form returning cached content:

request = $.ajax({
    type: "POST",
    cache: false,
    url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
    data: $(form).serialize(),
    timeout: 3000
});

Use done() and fail() instead of success and error now:

// Called on success.
request.done(function(msg) {
    alert('works');
});
// Called on failure.
request.fail(function (jqXHR, textStatus, errorThrown){
    alert('failed');
    // log the error to the console
    console.error(
        "The following error occurred: " + textStatus, errorThrown
    );
});

Here's the whole thing:

$(document).ready(function() {
    $("#contact").validate({
        rules: {
            name: {required: true},
            email: {required: true},
            subject: {requred: true}
        },
        submitHandler: function(form) {
            request = $.ajax({
                type: "POST",
                cache: false,
                url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
                data: $(form).serialize(),
                timeout: 3000
            });
            // Called on success.
            request.done(function(msg) {
                alert('works');
            });
            // Called on failure.
            request.fail(function (jqXHR, textStatus, errorThrown){
                alert('failed');
                // log the error to the console
                console.error(
                    "The following error occurred: " + textStatus, errorThrown
                );
            });
            return false;
        }
    });
});

Add no-cache to process.php header to help prevent the browser form caching content:

<?=header("cache-control: no-cache");?>