jQuery ajax submit validation

Question

I'm trying to use the jQuery validation plugin and then submit my form via ajax, but I'm missing something. Anybody have any insight?

$('#theForm').validate({
    focusInvalid: false,
    invalidHandler: function () {
        $('#message').addClass('error').html('Please fill out all necessary fields.').slideDown();
    },
    submitHandler: function (form) {
        $('#message').removeClass('error').html('Saving info.').slideDown();
        $.post(form.action, $(form).serialize(), function () {
            $('#message').removeClass('error').html('Saving complete.').slideUp(3500);
        });
    }
});

Answer 1

You're passing

$(form).serialize()

to the second parameter of $.post which should be passed key/value pairs in the form of

{ name: "John", time: "2pm" }

where as serialize() returns a query string. Try using serializeArray() which returns a JSON data structure. If that doesn't work you might need to manually retrieve each value from the form and pass them to $.post as key/value pairs.

Answer 2

For submit form via AJAX, you should consider Malsup's Form Plugins. It provide a better way to handle various form field's type. To make it work with jQuery validation plugins, see this example.