Question

• jQuery 1.7.2
• jQuery Validate 1.1.0
• jQuery Form 3.18
• WordPress 3.4.2

I am trying to code a contact/ mail form in above environment/ with above jQuery libs. Now I am having a problem with the jQuery Form JS:

I have taken the original code from the developers page for ajaxSubmit and only altered the target option to an ID which exists in my HTML source and replaced $ with jQuery in function showRequest.

The problem is, that the function named after success: does not fire. I tried the same with error: and again nothing fired.

Only complete: did and the function I placed there alerted the responseText from the receiving script.

Does anyone has an idea whats going wrong?

Code:

jQuery(document).ready(function() {
var options = { 
    target:        '#mail-status',   // target element(s) to be updated with server response 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
};
jQuery("#mailform").validate(
{
    submitHandler: function(form)   { jQuery(form).ajaxSubmit(options); },
    errorPlacement: function(error, element) { },
    rules: {
        author: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        comment: {
            minlength: 2,
            required: true
        }
    },
    highlight: function(element) 
    {
        jQuery(element).addClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").addClass("e");
    },
    unhighlight: function(element) 
    {
        jQuery(element).removeClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").removeClass("e");
    }
});
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// formData is an array; here we use $.param to convert it to a string to display it 
// but the form plugin does this for you automatically when it submits the data 
var queryString = jQuery.param(formData); 

// jqForm is a jQuery object encapsulating the form element.  To access the 
// DOM element for the form do this: 
// var formElement = jqForm[0]; 

alert('About to submit: \n\n' + queryString); 

// here we could return false to prevent the form from being submitted; 
// returning anything other than false will allow the form submit to continue 
return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
// for normal html responses, the first argument to the success callback 
// is the XMLHttpRequest object's responseText property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'xml' then the first argument to the success callback 
// is the XMLHttpRequest object's responseXML property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'json' then the first argument to the success callback 
// is the json data object returned by the server 

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    '\n\nThe output div should have already been updated with the responseText.'); 
} 

Answer 1

See if the validation succeeds and jQuery(form).ajaxSubmit(options); is invoked.