Question

I am using Jquery Validation Engine http://posabsolute.github.com/jQuery-Validation-Engine/ and I just want to reveal a hidden loading gif once the form has been found to be valid.

ie

• user submits form

• if form is valid:
  $(‘#lulus-loading-div’).show();

I have tried this, but no luck there:

• Jquery and jQuery-Validation-Engine

I seem to be having no luck implementing the onSuccess() callback function.

I don’t doubt that it works swimmingly, I am unfortunately ignorant of the correct syntax, and have had no luck with docs : /

At the moment I have:

jQuery(document).ready(function(){
        jQuery("#model-form").validationEngine({

           onSuccess: function(){
              $('#lulus-loading-div').show();
           });
        });

 });

This calls onSuccess() the first time a single field validates, then if you try to submit form incomplete, it submits without flagging errors.

Any help or suggestions would be greatly appreciated 🙂

if you need any more details please let me know.

Answer 1

Validation Engine does not have anything (working) to accomplish such task.

Assuming that your form uses page reload – but should work with ajax based no-reload submissions as well.

At one time I needed something like it and I wrote a quick’n’dirty hack, which does just that.

I use version 2.5.2

Find this code (around line 240-250)

form.trigger("jqv.form.result", [errorFound]);

Right before it add this code:

if (options.jpAfterSuccessValidation && !errorFound) {
    options.jpAfterSuccessValidation();
}

On the very bottom, in default, append to (add after) “fadeDuration”

fadeDuration: 0.3,
jpAfterSuccessValidation: false //launches callback, if all fields validate

and use it like this:

jQuery("#model-form").validationEngine({
    jpAfterSuccessValidation: function(){
    $('#lulus-loading-div').show(); //this will pull-up your info dialog
    }
});

Your “lulus-loading-div” will stay visible until page holding form reloads (and form gets submited).