Validar subconjunto de un formulario utilizando jQuery Validar complemento

Question

Mi formulario HTML tiene una serie de div que son los pasos de un asistente. Al hacer clic en el botón "siguiente", quiero validar solo el div activo. Estoy usando el complemento jQuery.Validate.js.

Cada div tiene una identificación, por lo que quiero una manera de decir algo como:

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

pero esto sólo valida la primera entrada, no todos ellos. ¿Cómo puedo validar todas las entradas dentro de un div?

Answer 1

Tomando lo que sugiere Jandy, creé esta función auxiliar:

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; 
} 

uso:

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

Answer 2

Probé esta solución y no funcionó para mí. Así que aquí es cómo logré el mismo comportamiento, usando el complemento jquery.validation.

El validador:

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 
     } 
    }); 

Usando bootstrap form wizard.

Éste es cómo validar cada paso:

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

funciona como un encanto.

Answer 3

Si nos fijamos en la options for the validate() function una de las opciones es ignore, que por defecto será evitar que el validador de intentar validar aquellos campos que coinciden con el CSS pseudo-clase :hidden. Solía ​​esto en combinación con la FuelUX Wizard y fue capaz de prevenir el asistente de progresar a la siguiente etapa con el siguiente:

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