jquery validation de l'assistant de formulaire

Question

J'essaie d'implémenter un script de validation (bassistance) avec un assistant de formulaire jquery (http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx) mais j'ai quelques problèmes.

Sur la page de l'assistant jquery, un gars nommé "Tommy" a créé un morceau de code pour implémenter la bassistance avec le code. Mais pour une raison quelconque, je ne peux pas le faire fonctionner. Il se présente en disant si le champ doit être rempli etc et le bouton suivant ne fonctionne pas - ce qui est bien, MAIS, si je remplis tous les champs, le bouton suivant ne fonctionne toujours pas ..

function createNextButton(i) { 

      var stepName = "step" + i; 
      $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>"); 

      /* VALIDATION */ 
      if (options.validationEnabled) { 
       var stepIsValid = true; 
       $("#" + stepName + " :input").each(function(index) { 
        stepIsValid = !element.validate().element($(this)) && stepIsValid; 
       }); 
       if (!stepIsValid) { 
        return false; 
       } 
      } 
      /* END VALIDATION */ 

      $("#" + stepName + "Next").bind("click", function(e) { 
       $("#" + stepName).hide(); 
       $("#step" + (i + 1)).show(); 
       if (i + 2 == count) 
        $(submmitButtonName).show(); 
       selectStep(i + 1); 
      }); 

     } 

Quelqu'un pourrait-il m'aider à comprendre cela? :)

Answer 1

Ok alors j'ai ajouté la validation à l'événement clic et je compris que « element.validate() élément. ($ (This)) & & stepIsValid » existait en fait .. Si quelqu'un d'autre utilise cela et ayant la même problème, la solution est:

/* VALIDATION */ 
       if (options.validationEnabled) { 
        var stepIsValid = true; 
        $("#"+stepName+" :input").each(function(index) { 
         checkMe = element.validate().element($(this)); 
         //stepIsValid = !element.validate().element($(this)) && stepIsValid; 
         stepIsValid = checkMe && stepIsValid; 
        }); 
        //alert("stepIsValid === "+stepIsValid); 
        if (!stepIsValid) { 
         return false; 
        }; 
       }; 
       /* END VALIDATION */ 

Answer 2

Essayez d'ajouter la validation dans l'événement click

function createNextButton(i) { 
    var stepName = "step" + i; 
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>"); 

    $("#" + stepName + "Next").bind("click", function(e) { 
     /* VALIDATION */ 
     if (options.validationEnabled) { 
      var stepIsValid = true; 
      $(this).closest("fieldset").find(":input").each(function(index) { 
       stepIsValid = element.validate().element($(this)) && stepIsValid; 
      }); 
      if (!stepIsValid) { 
       return false; 
      } 
     } 
     /* END VALIDATION */ 

     $("#" + stepName).hide(); 
     $("#step" + (i + 1)).show(); 
     if (i + 2 == count) 
      $(submmitButtonName).show(); 
     selectStep(i + 1); 
    }); 
} 

Mise à jour

OU ... Essayez de supprimer le contrôle par défaut de la Recevoir les newsletters? case à cocher (décochée par défaut). L'événement click n'est pas attaché au bouton suivant, car la case à cocher est requise et cochée, donc stepIsValid est false et createNextButton renvoie false avant de lier l'événement click.