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.

Do you happen to have the current version online somewhere? Also — be aware that, if you attach a submit handler to a form, that you have to manually prevent the default event (submitting the form), e.g. by returning false at the end of your handler function. [And I had a quick look at the source of the plugin (which I don't know) and it looked like (don't quote me) that they would be passing first the status and then the form (in version 2.0 beta)?] — polarblau
– polarblau, Commented Mar 5, 2011 at 20:51
The current version is here haloadvance.com/testsite - but its the form after you submit this one. - I can provide the complete code for the page if that helps. — Tom
– Tom, Commented Mar 5, 2011 at 22:06

Froilan · Accepted Answer · 2011-11-23 22:21:13Z

2

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

        }
    }           
});

answered Nov 23, 2011 at 22:21

Froilan

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ilumin · Accepted Answer · 2011-03-30 14:25:58Z

0

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.

answered Mar 30, 2011 at 14:25

ilumin

60812 silver badges22 bronze badges

Comments

Ian Stanway · Accepted Answer · 2011-08-12 14:09:39Z

0

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>

answered Aug 12, 2011 at 14:09

Ian Stanway

6088 silver badges25 bronze badges

Comments

michaelb958--GoFundMonica · Accepted Answer · 2013-05-21 03:05:40Z

0

you need

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

edited May 21, 2013 at 3:05

michaelb958--GoFundMonica

4,7367 gold badges34 silver badges35 bronze badges

answered May 21, 2013 at 2:45

Robin Gomez

3333 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery validationEngine

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related