Using the jQuery validation plugin's submitHandler method properly

Question

Hi, first a little bit of documentation from the jQuery validation plugin:

"Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again."

submitHandler: function(form) {
    $.ajax({
        type: 'POST',
        url: form.action,
        data: 'current_password=' + form.current_password + '&new_password=' + form.new_password,
        success: function(){
            alert("succes");
        }
    });
}

So, naturally my ingenious piece of code isn't working. I'm trying to access the 'action' attribute and the two input fields from the form object, with no luck. How am I supposed to do this?

Answer 1

Try this instead:

submitHandler: function(form) {
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: { current_password : form.current_password.value,
                new_password: form.new_password.value }
        success: function(){
            alert("succes");
        }
    });
}

Currently instead of submitting the values of the elements it's literally calling a toString on them, so just add .value to get the values. Also we're passing data as an object here so it gets encoded, otherwise if for example the password had a & in it, the post wouldn't be correct.