Question

I started out with this code for submitting a form using the jQuery ajax method (which is working without issue)

$( function() {
//bind an event handler to the submit event for the appointment form
    $("#idw-form").on("submit", function(e) {
//cache the form element for use in this function
    var $form = $( this );
//prevent the default submission of the form
    e.preventDefault();
//run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.post($form.attr('action'), $form.serialize(), function (responseData) {
        if (responseData == 1) {
            $.mobile.changePage( 'thank-you-dialog.html', { transition: "pop" } );
        } else {
            $.mobile.changePage( 'error-dialog.html', { transition: "pop" } );
        }
        return false;
    });
});
});

Then I wanted to introduce validation using the jQuery validate plugin. I thought I should be able to just put this code into the submitHandler callback function, but it wasn’t working. Spent hours working it over, debugging in firebug and finally got it working. There were a couple of things that were causing the problem.

1. I had to comment out the e.preventDefault(); that I’m used to needing. (now that I’m typing this, I’m vaguely remembering that maybe I only included this line of code because that was needed in order to get it working with jQuery Mobile Framework, but I’m not sure).
2. I had to change the variable that was being .serialize()‘d. For some reason when the form was submitted with this code, the serialize function would always return an empty string.

Here is my revised code that I was finally able to get working:

submitHandler: function(form) {
    formObj = $( '#' + form.id );
    var replaceDiv = $( '#main-content' );
    //prevent the default submission of the form
    //e.preventDefault();
    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.ajax({
        type: 'POST',
        url: '/scripts/idw-mail-handler.php',
        dataType: 'json',
        data: formObj.serialize(),
        success: function(responseData, responseStatus, responseXml){
            console.log( 'responseData is: ' + responseData );
            console.log( 'responseStatus is: ' + responseStatus );
            console.log( 'responseXML is: ' + responseXml );
            replaceDiv.hide();
            if (responseData.sentStatus == 1) {
                replaceDiv.before(responseData.successMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals: ' + responseData.sentStatus );
            } else {
                replaceDiv.before(responseData.errorMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals something other than 1: ' + responseData.sentStatus );
            }
        },
        error: function(errorXml, errorStatus, errorError){
            console.log( 'ErrorXml is: ' + errorXml );
            console.log( 'errorStatus is: ' + errorStatus );
            console.log( 'errorError is: ' + errorError );
        },
        complete: function(completeXml, completeStatus){
            console.log( 'completeXML is: ' + completeXml );
            console.log( 'completeStatus is: ' + completeStatus );
        }
    });
}

Of course the error: and complete: methods (is “methods” the right terminology?) are not necessary. Just something I was using to better understand the ajax function for jQuery.

So, I have three questions.

1. Does the jQuery validate script have a default action that needs to be prevented? I know it looks like it doesn’t based on my code that is working, but I wanted to see if anyone had any additional insight into that.
2. Why did I need to change the variable that was being serialize()‘d? What is different about when I use the jQuery .on("submit", function(e) { ... method of firing that allows $(this) to be serialize()‘d, vs when I fire the ajax submission via the submitHandler: method of the jQuery validate function?
3. Is there a more efficient / better way I could be doing this?

Thank you so much for any and all feedback!

Answer 1

Does the jQuery validate script have a default action that needs to be prevented? I know it looks like it doesn’t based on my code that is working, but I wanted to see if anyone had any additional insight into that.

No, it doesn’t. You can verify this by checking out the code that ultimately handle’s the submit event. You can also write a simple example to prove this:

$("#myform").validate({
    submitHandler: function (form) {
        console.log('hi');
    }
});

The above example won’t actually post the form even when it’s valid. The plugin takes care of preventing the default action of the submit event if you specify a submitHandler.

Why did I need to change the variable that was being serialize()’d?
What is different about when I use the jQuery .on(“submit”,
function(e) { … method of firing that allows $(this) to be
serialize()’d, vs when I fire the ajax submission via the
submitHandler: method of the jQuery validate function?

Inside of submitHandler, this references the validator object that you’re applying to the form. That’s why $(this).serialize() doesn’t make sense like it did inside of an event handler (where this references the element the event occurred upon). Instead, you should jQuerify the form element that’s passed to the submitHandler:

$("#myform").validate({
    submitHandler: function (form) {
        var serialized = $(form).serialize();
    }
});

Is there a more efficient / better way I could be doing this?

Not really. I think this is a pretty standard, correct way to use submitHandler. If you want your AJAX submission code to be a bit shorter, you could look at the jQuery form plugin instead of doing a vanilla jQuery AJAX call (in fact, some of the example code in the docs for validate use that plugin).