jQuery validationEngine

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('a开发者_运维技巧ttach', {
        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.

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

        }
    }           
});

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

But I think if you want to display loading popup,
you must use jQuery.ajax

It have beforeSend function that will run before browser send request.

onValidationComplete stops the form submitting, and lets you handle things yourself. In this case, all you want to do is display the loading popup when the validation passes. So instead, what you could do is hook into the result of the validation, and if it has passed show the loading popup. The form submission would then activate as normal.

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
    jQuery("#approvalForm").bind("jqv.form.result", function(event, errorFound) {
        if(!errorFound) $('#progress').show();
    })
});
</script>

you need

$('#approvalForm').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status) {                   
            startProgressBar();
            YouFunctionPreLoad();
            return true;
            //form.submit();
        }
    }           
});