Проверить подмножество формы с помощью плагина jQuery Validate

Question

Моя HTML-форма содержит несколько элементов div, которые являются шагами мастера. После нажатия кнопки «Далее» я хочу проверить только активный div. Я использую плагин jQuery.Validate.js.

У каждого div есть свой идентификатор, поэтому я хочу сказать что-то вроде:

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

, но это проверяет только первый ввод, а не все. Как я могу проверить все входы в div?

Answer 1

Используя то, что предложил jAndy, я создал эту вспомогательную функцию:

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

использование:

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

Answer 2

Я попробовал это решение, и оно не сработало для меня. Вот как я добился того же поведения, используя плагин jquery.validation.

Валидатор:

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

Использование мастера загрузки формы .

Вот как я проверяю каждый шаг:

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

Работает как шарм.

Answer 3

Если вы посмотрите на параметры для функции validate() , то один из параметров - ignore, который по умолчанию не позволит валидатору попытаться проверить любые поля соответствовать псевдоклассу CSS :hidden. Я использовал это в сочетании с FuelUX Wizard и смог помешать мастеру перейти к следующему шагу со следующим:

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