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

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

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

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

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

Ответ 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
}

Ответ 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()

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

Ответ 3

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

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