Sprawdzanie poprawności podzbioru formularza za pomocą wtyczki jQuery Validate

Question

Mój formularz HTML ma liczbę elementów div, które są krokami kreatora. Po kliknięciu przycisku "dalej" chcę sprawdzić tylko aktywny element div. Korzystam z wtyczki jQuery.Validate.js.

Każdy div ma identyfikator, więc chcę to sposób powiedzieć coś takiego:

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

ale to tylko potwierdza pierwsze wejście, nie wszystkie z nich. Jak mogę sprawdzić wszystkie dane wejściowe w dziale div?

Answer 1

Biorąc co sugeruje Jandy, stworzyłem tę funkcję pomocnika:

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

Wykorzystanie:

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

Answer 2

Próbowałem to rozwiązanie i to nie działa dla mnie. Oto jak osiągnąłem to samo zachowanie, używając wtyczki jquery.validation.

Walidator:

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

Korzystanie bootstrap form wizard.

ten sposób mogę zweryfikować każdym kroku:

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

działa jak czar.

Answer 3

Jeśli spojrzeć na options for the validate() function jedną z opcji jest ignore, który domyślnie będzie zapobiegać walidator z przystąpieniem do sprawdzania żadnych pól, które pasują do CSS pseudo-klasy :hidden. Ta była wykorzystywana w połączeniu z FuelUX Wizard i był w stanie zapobiec kreatora z przejściem na następnym etapie następuje:

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