jQuery Form Validate not posting when using file upload

Question

I've been using jQuery Validate plugin without problems for a while now, but not that I'm trying to use it with a file upload it does not work.

Im getting no post, and the page just reloads too quickly for me to see the "illegal" error that comes up.

The jQuery is as follows:

_validateModalForm = function(formID, modalShow){
    var mesContainer = "#modal-message";
    $("#" + formID).validate({
        invalidHandler: function () { //display error alert on form submit              
            EMPGlobal.showAlert(mesContainer, '', 'danger', 'There was an error, please check the form, correct, and try again.' , '', '', '', 'warning');
        },
        submitHandler: function (form){ 
            var formData = form;
            formData = new FormData(formData);
            console.log(formData);
            $.ajax({
                url: 'includes/pages/leads.php?',
                //data: $(form).serialize(),
                data: formData,
                mimeType: "multipart/form-data",
                type: "POST",
                success: function (result) {
                    $.each(result, function(item, value){
                        if( (item == 'Success') || (item == 'Warning') ){
                            if(item == 'Success'){
                                var alertType = 'success';
                            } else {
                                var alertType = 'danger';
                            }
                            modalShow.modal('toggle');
                            EMPGlobal.showAlert('', '', 'success', value, '', '', '', alertType);
                            $('#lead-report-range').change(); //Reset the boxes
                        }
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    returnMes = $.parseJSON(jqXHR.responseText);
                    message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occurred. <br /> <i>Message Details: ' + returnMes + '</i>';
                    EMPGlobal.showAlert(mesContainer, '', 'danger', message, '', '', '', 'warning', jqXHR.status);
                },
            });
            return false;
        }
    });

    $("#" + formID + " input[required='required']").each(function(){
        $(this).rules( "add", {
            required: true,
            minlength: 2
        });
    });
};

It validates correctly, but just wont post over Ajax.

Any help on this one would be appreciated. I'm sure its something simple that I am missing.

Update

The error is as follows:

Uncaught TypeError: Illegal invocation
n.param.e @ jquery-1.11.0.min.js:4
Wc @ jquery-1.11.0.min.js:4
n.param @ jquery-1.11.0.min.js:4
n.extend.ajax @ jquery-1.11.0.min.js:4
$.validate.submitHandler @ leads.js:157
d @ VM16566:4(anonymous function) @ VM16566:4
n.event.dispatch @ jquery-1.11.0.min.js:3
n.event.add.r.handle @ jquery-1.11.0.min.js:3

Answer 1

With the help of charlietfl managed to get this working.

_validateModalForm = function(formID, modalShow){
    var mesContainer = "#modal-message";
    $("#" + formID).validate({
        invalidHandler: function () { //display error alert on form submit              
            EMPGlobal.showAlert(mesContainer, '', 'danger', 'There was an error, please check the form, correct, and try again.' , '', '', '', 'warning');
        },
        submitHandler: function (form){ 
            var formData = new FormData($(form)[0]);
            $.ajax({
                url: 'includes/pages/leads.php?',
                //data: $(form).serialize(),
                data: formData,
                type: "POST",
                dataType: "json",
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    $.each(result, function(item, value){
                        if( (item == 'Success') || (item == 'Warning') ){
                            if(item == 'Success'){
                                var alertType = 'success';
                            } else {
                                var alertType = 'danger';
                            }
                            modalShow.modal('toggle');
                            EMPGlobal.showAlert('', '', 'success', value, '', '', '', alertType);
                            $('#lead-report-range').change(); //Reset the boxes
                        }
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    returnMes = $.parseJSON(jqXHR.responseText);
                    message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occured. <br /> <i>Message Details: ' + returnMes + '</i>';
                    EMPGlobal.showAlert(mesContainer, '', 'danger', message, '', '', '', 'warning', jqXHR.status);
                },
            });
            return false;
        }
    });
};