jQuery - Using validate plugin with AJAX form plugin

Question

I have used both the validate plugin and the AJAX form plugin to great success, but using them together is baffling me.

If I use the validate plugin to validate, then on success, post the AJAX form, nothing happens. Literally. Even in Firebug, the AJAX plugin doesn't seem to do anything.

If I try it the other way around, where by I use the beforeCallback to then call jQuery validate plugin...no validation is done, but the form submits to the page.

So I can get each plugin to work, but not together.

Does anyone have any idea? The first route I describe is used here like so:

function sendFormVacancy() {

    alert("submit"); // This does get called, but the code below doesn't submit the form.

    var options = {

        beforeSubmit:  validateRequest,
        target:     "#messages",
        clearForm:  true,
        type:       "POST",
        url:        "/form-vacancy.php",

        success: function() {
            $('#messages').html("<p><?php _e("Application sent!", "tokheim"); ?></p>").css('color', 'green');
        },

        error: function() {
            $('#messages').html("<p><?php _e("Sorry, an error occurred.", "tokheim"); ?></p>").css('color', 'red'); 
        }

    }; 

    $("#static-form-vacancy").ajaxForm(options);

}

$("#static-form-vacancy").validate({ 

    rules: { 

        fieldfile:"required",
        fieldtitle:"required",
        fieldfirstname:{ required: true }, 
        fieldlastname:"required", 
        fieldaddress1:"required",
        fieldcity:"required",
        fieldcountry:"required",
        fieldphone:"required",
        fieldemail:{ required: true, email: true },
        fieldcontactmethod:"required",
        fieldrelocate:"required",
        fieldcomments:"required"

    }, 

    messages: { 

        fieldfile:"<?php _e("Select a file to upload", "tokheim"); ?>",
        fieldtitle:"<?php _e("Select your title", "tokheim"); ?>",
        fieldfirstname:{ required:"<?php _e("Enter your firstname", "tokheim"); ?>" },
        fieldlastname:"<?php _e("Enter your lastname", "tokheim"); ?>",
        fieldaddress1:"<?php _e("Enter your address", "tokheim"); ?>",
        fieldcity:"<?php _e("Enter your city", "tokheim"); ?>",
        fieldcountry:"<?php _e("Enter your country", "tokheim"); ?>",
        fieldphone:"<?php _e("Enter your phone number", "tokheim"); ?>",
        fieldemail:{ required:"<?php _e("Please enter an email address", "tokheim"); ?>", email:"<?php _e("Email is not valid", "tokheim"); ?>" },
        fieldcontactmethod:"<?php _e("Select an option", "tokheim"); ?>",
        fieldrelocate:"<?php _e("Select an option", "tokheim"); ?>",
        fieldcomments:"<?php _e("Enter your comments", "tokheim"); ?>"

    },

    submitHandler: function() { 
        sendFormVacancy(); 
    }

});

The jQuery validate plugin I am using is: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The AJAX form submit script I am using is: http://malsup.com/jquery/form/

Now, I could simply submit this with AJAX the 'manual' way...BUT, the reason I am using this plugin, is because it handles file uploads via AJAX, which is the functionality I need.

Any help would be greatly appreciated. I'm pulling my hair out!

Could it be to do with each plugin binding to the form in some way and locking out the other?

Thanks, Michael.

Answer 1

Call .valid() in beforeSubmit handler of ajaxForm.

$('#myForm').validate({
    rules: {
        /* rules */
    },
    messages: { 
        /* messages */
    },
    submitHandler: function () {
        /* update ui before post */
    }
});

$('#myForm').ajaxForm({
    dataType: 'json',
    beforeSubmit: function () { return $('#myForm').valid(); },
    success: function (data) { /*callback, update ui after post*/ }
});