Question

I have an upload form that should display a progress bar while the file is uploading. The form uses the jQuery Validate plugin to limit file types.

With my current code the progress bar is displaying immediately after the submit button is pushed, even if there is no file selected or the file type does not match.

Any ideas why this is happening?

$(document).ready(function() {

    $('#document_upload').validate({

        rules: {
            uploaded_file: {
                required: true,
                accept: "pdf|jpg|gif|png"
            }
        },
        errorPlacement: function(error, element) {
            return true;
        }
    });

    $('#document_upload').submit( function() {

        $('#upload_progress').show();

     });

})

Answer 1

Are you getting the correct error message when submitting? I assume so, because the progress bar is showing and thus the form is not sent.

How is the file uploaded? Is it just a standard <input type="file"> ?

This will always show the uploader on submit, so you’ll need to add some checks

$('#document_upload').submit( function() {
    $('#upload_progress').show();
});

What you could try to add is:

if($("#document_upload input[name=uploaded_file]").length >= 1){
    $('#upload_progress').show();
}

Can you set-up an example on jsfiddle.net?