Using jQuery validate to upload a form, using ajax in the submitHandler()... not working

Question

I am using jquery validate with a form. I want to submit the form using ajax. When I put the ajax call in validate's submitHandler() The browser hangs. What's going on?

The error message I get when I enable the validate method's debug is:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js :: f :: line 132" data: no]

Which is too arcane for me to make sense of.

Some code:

$(document).ready(function() {
$("#loginForm").validate({
        debug: true,
        errorLabelContainer: $('div.error'),
        wrapper: 'li',
        rules:  {
            last_name: {
                required: true
            }
        },
        messages: {
            last_name: {
                required: "Please enter your last name."
            }
        },
        submitHandler: function(form){
            $.ajax({
                type: "POST",
                url: "test.php",
                data: form,
                success: function(msg){
                    console.log( "Data Saved: " + msg );
                },
                error: function(msg){
                    console.log( "Error: " + msg);
                }
            });
        }
    });

});

The form is a very vanilla form. Submitting via a standard POST works fine. Also, the validation works fine... it's just the submitting with ajax part that fails me.

Answer 1

You'll probably want to serialise that form before sending it - you probably don't want to send a DOM object

edit RE:comment - to select only some inputs and serialize -

$(form).find(":input[name=inp1] :input[name=inp2]").serialize()

Answer 2

Just to elaborate of tobyodavies answer. You might want to change your submission to

        $.ajax({
            type: "POST",
            url: "test.php",
            data: $(form).serialize(),
            success: function(msg){
                console.log( "Data Saved: " + msg );
            },
            error: function(msg){
                console.log( "Error: " + msg);
            }
        });

The ajax function expects the data option to be a string (not entirely true but for this case it's fine) while your passing in the forms dom object.