Comment implémenter onSuccess() en utilisant le moteur de validation de Jquery ?

Question

J'utilise le moteur de validation Jquery http://posabsolute.github.com/jQuery-Validation-Engine/ et je veux juste révéler un gif de chargement caché une fois que le formulaire a été jugé valide .

ie

• l'utilisateur soumet le formulaire

• si le formulaire est valide : $('#lulus-loading-div').show() ;

J'ai essayé, mais sans succès :

• Jquery et jQuery-Validation-Engine

Il semble que je n'arrive pas à mettre en œuvre la fonction de rappel onSuccess().

Je ne doute pas que cela fonctionne parfaitement, je suis malheureusement ignorant de la syntaxe correcte, et je n'ai pas eu de chance avec les docs : /

Pour l'instant, j'ai :

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

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

 });

Cela appelle onSuccess() la première fois qu'un champ unique est validé, puis si vous essayez de soumettre le formulaire de manière incomplète, il se soumet sans signaler d'erreurs.

Toute aide ou suggestion serait grandement appréciée :)

si vous avez besoin de plus de détails, n'hésitez pas à me le faire savoir.

Answer 1

Le moteur de validation n'a rien (de fonctionnel) pour accomplir cette tâche.

En supposant que votre formulaire utilise le rechargement de la page - mais il devrait également fonctionner avec les soumissions sans rechargement basées sur l'ajax.

Il fut un temps où j'avais besoin de quelque chose comme cela et j'ai écrit un hack rapide et sale, qui fait exactement cela.

J'utilise la version 2.5.2

Trouvez ce code (autour de la ligne 240-250)

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

Juste avant, ajoutez ce code :

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

Tout en bas, par défaut, ajouter à (ajouter après) "fadeDuration"

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

et l'utiliser comme suit :

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

Votre "lulus-loading-div" restera visible jusqu'à ce que la page contenant le formulaire se recharge (et que le formulaire soit soumis).

Answer 2

Les bogues onSuccess sont également rapportés sur leur Git. Voici un contournement de snnipet tiré de https://github.com/posabsolute/jQuery-Validation-Engine/issues/554 :

$("#my_form").validationEngine('attach', { 
    onValidationComplete: function(form, status){ // when validate is on and the form scan is completed
        if (status == true) { // equiv to success everythings is OK
            // we disable the default from action to make our own action like alert or other function
            form.on('submit', function(e) {
                e.preventDefault();
            });

            // your function or your action

            alert("Successful! Now submitting");
            return true;
        } else {
            // we disable the default from action to make our own action like alert or other function
            form.on('submit', function(e) {
                e.preventDefault();
            });

            // your function or your action

            alert("Errors! Stopping Here");
        }
    },
    promptPosition : "topLeft", 
    scroll: false
});

J'espère que cela aidera quelqu'un !!!

Answer 3

La solution "rapide et propre" consiste à procéder comme suit :

$("#new_user").validationEngine("attach", {
  promptPosition: "topLeft",
  onFieldSuccess: function() {
    alert("rakoto");
  }
});

J'espère que cela vous aidera ;)