jQuery validationEngine

Question

I am a total noob with jQuery and js and I am certain there is a more elegant solution then what I have come up with - but this is what I have so far and I'm stumped.

I have a form that takes a long time to submit for various reasons - I am using validationEngine to validate the form fields inline which works great. I then needed to add a pop-up div to tell the visitor to please be patient why the application performs the requested search.

My original solution worked great accept that the pop-up div showed when the visitor clicked submit regardless if the form was completely filled out or not - it the form is completely filled out everything works as expected - if they miss a field validationEngine shows the missing field notification and my pop-up div still shows up but obviously the form does not submit. That happens with this code:

jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
});

    $(document).ready(function() {
        $('#approvalForm').submit(function() {
            $('#progress').show();
            });
        });

So after some research I made some modifications that resulted in this code:

    jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach', {
        onValidationComplete: function(form, status){
        if (status == true) {
            $('#approvalForm').submit(function() {
                    $('#progress').show();
                });
        }
             }
     });
});

And now everything works correctly except that you have to click the submit button twice and when you do the pop-up div comes up but the form does not submit.

Answer 1

$('#form1').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status == true) {                   
            startProgressBar();
            form.validationEngine('detach');
            form.submit();

        }
    }           
});