Valider le sous-ensemble d'un formulaire à l'aide de jQuery Valider le plugin

Question

Mon formulaire HTML comporte un certain nombre de div qui sont les étapes d'un assistant. En cliquant sur un bouton "suivant", je veux valider uniquement la div active. J'utilise le plugin jQuery.Validate.js.

Chaque div a une carte d'identité, donc je veux une façon de dire quelque chose comme:

wizardForm.validate().element('#first-step :input') 

mais cela ne valide que la première entrée, pas tous. Comment puis-je valider toutes les entrées dans un div?

Answer 1

Prendre ce Jandy a suggéré, j'ai créé cette fonction d'assistance:

jQuery.validator.prototype.subset = function(container) { 
    var ok = true; 
    var self = this; 
    $(container).find(':input').each(function() { 
     if (!self.element($(this))) ok = false; 
    }); 
    return ok; 
} 

utilisation:

if (wizardForm.validate().subset('#first-step')) { 
    // go to next step 
} 

Answer 2

J'ai essayé cette solution et il ne fonctionne pas pour moi. Donc, voici comment j'ai réalisé le même comportement, en utilisant le plugin jquery.validation.

Le validateur:

var form = $('#form'); 

    // init validator obj and set the rules 
    form.validate({ 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-inline', // default input error message class 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: "", 
     rules: { 
      // the rules, as usual 
     }, 

     highlight: function (element) { // hightlight error inputs 
      $(element).closest('.control-group').addClass('error'); // set error class to the control group 
     }, 

     unhighlight: function (element) { // revert the change dony by hightlight 
      $(element) 
       .closest('.control-group').removeClass('error'); // set error class to the control group 
     } 
    }); 

En utilisant bootstrap form wizard.

Voilà comment je valider chaque étape:

$('#step :input').valid() 

fonctionne comme un charme.

Answer 3

Si vous regardez le options for the validate() function l'une des options est ignore, qui par défaut empêchera le validateur de tenter de valider tous les champs correspondant à la pseudo-classe CSS :hidden. J'ai utilisé ce en combinaison avec le FuelUX Wizard et a été en mesure d'empêcher l'assistant de progresser à l'étape suivante avec les éléments suivants:

$('#wizard').wizard().on('change', function(event, info) { 
    if (! $('#wizard_form').valid()) event.preventDefault(); 
});