jQuery Validate ajaxSubmit show hidden div

Question

I am using jQuery Validate with ajaxSubmit to post a multipart/form-data form to my CI controller.

//Form Submit functions
    $('#newEventSubmit').click(function(s) {
        $("#newEventForm").validate({
            errorClass: "validattion",
            validClass: "valid",
            highlight: function( element, errorClass, validClass ) {
                $(element).addClass(errorClass).removeClass(validClass);
            },
            unhighlight: function( element, errorClass, validClass ) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            errorPlacement: function(error, element) { },
            submitHandler: function(form) {
                var formObj = $(form);
                var formURL = formObj.attr("action");
                var formData = new FormData(this);
                $(form).ajaxSubmit({
                    url: formURL,
                    type: 'POST',
                    data:  formData,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    dataType: "HTML",
                    processData: false,
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                        console.log(jqXHR);
                        console.log(textStatus);
                    }
                });
            }
        });
    });

My question is this, I have a hidden div which is a Hud that I want to display whilst the ajaxSubmit is processing. $( "#hud-overlay" ).show(); however when I put it into the click event the form stops processing and if I put this in the $(form).ajaxSubmit() code it doesn't fire can any one tell me what I am doing wrong.

NB. I have also tried this, but to no avail.

$( document ).ajaxStart(function() {
    $( "#hud-overlay" ).show();
});

Answer 1

This is wrong…

$('#newEventSubmit').click(function(s) {
    $("#newEventForm").validate({ ...

You do not put the .validate() method inside of a click event handler. The .validate() method is only for initializing the plugin on your form.

The click event of the submit button is captured automatically by the plugin. Typically you would put .validate() inside of the DOM ready event handler and then the plugin is initialized when the page is loaded.

$(document).ready(function() {     // <- DOM is ready

    $("#newEventForm").validate({  // <- initialize the plugin on the form
        …                          // <- your options, rules, and callbacks
    });

});