Call js function on form submit while image uploads

Question

So I have a form with multiple required input fields and one required file input (for a thumbnail image). What I want to do is show a loading animation when the user presses the submit button and waits for the image to be uploaded. I can't do this with onclick, because the loading animation would show even if the required fields were left empty. I tried to do it with this piece of code:

$(document).ready(function(){
    $('form').on("submit",function(){
        var loading = document.getElementById("loading");
        loading.className = "opened";
    });
});

But this code would only show the loading animation when the form was submitted (so the image was already done uploading and by then I already redirect the page) and that is not what I want. So how can I do this?

Answer 1

I used Sercan Özen's idea (form.checkValidity()) and ended up with this code, that I call on button onclick:

function loading() {
    var loading = document.getElementById("loading");
    var form = document.getElementById("add_form");
    if (form.checkValidity()) {
        loading.className = "opened";
    }
}

Answer 2

You probably need to listen for the 'progress' event in order to know what parts of the uploaded file are sent. You could also listen for the 'success' event of the XHR request in order to know when the file has finally been uplaoded.

Here is an example:

<script type="text/javascript">
jQuery( document ).ready( function ()
{
    $( '#send' ).on( 'click', function ()
    {
        var file = $( '#sel-file' ).get( 0 ).files[0],
            formData = new FormData();

        formData.append( 'file', file );
        console.log( file );
        $.ajax( {
            url        : 'save-file.php',
            type       : 'POST',
            contentType: false,
            cache      : false,
            processData: false,
            data       : formData,
            xhr        : function ()
            {
                var jqXHR = null;
                if ( window.ActiveXObject )
                {
                    jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );
                }
                else
                {
                    jqXHR = new window.XMLHttpRequest();
                }
                //Upload progress
                jqXHR.upload.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                        //Do something with upload progress
                        console.log( 'Uploaded percent', percentComplete );
                    }
                }, false );
                //Download progress
                jqXHR.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                        //Do something with download progress
                        console.log( 'Downloaded percent', percentComplete );
                    }
                }, false );
                return jqXHR;
            },
            success    : function ( data )
            {
                //Do something success-ish
                console.log( 'Completed.' );
            }
        } );
    } );
} );
</script>

Answer 3

You can use checkValidity method by prevent submit method

$(document).on("submit", false); //prevent submit
var submitBtn = $('.submitBtn'); //change with your selector

submitBtn.click(function(e) {
    var form = $('form');
    if (form.checkValidity()) {
        form.submit();
    }
});