Открыть меню    

Как удалять, менять или добавлять правила валидации на странице, используя плагин validation

Следующие особенности не очень хорошо документированы в API (скорее всего не документированы вообще).

После того как вы инициализируете jQuery validator, вы можете по новой получить доступ к объекту validator, вызвав метод validate() для необходимой формы. Объект validator имеет свойство settings, которое хранит настройки определенные по умолчанию, комбинирую их с настройками, которые вы применили при инициализации.

Предположим я инициализирую validator следующим образом:

jQuery

$('form').validate({
    rules: {
        leftform_input1: { required: true },
        leftform_input2: { required: true }
    },
    messages: {
        leftform_input1: "Field is required",
        leftform_input2: "Field is required"
    }
});

Затем я могу получить точные настройки validator, выполнив следующее действие:

jQuery

var settings = $('form').validate().settings;

Теперь можно легко работать с настройками объекта, удаляя или добавляя правила валидации формы.

jQuery

var settings = $('form').validate().settings;
delete settings.rules.rightform_input1;
delete settings.messages.rightform_input1;

Ниже вы можете увидеть, как удалить конкретное правило валидации:

jQuery

var settings = $('form').validate().settings;
settings.rules.leftform_input1 = {required: true};
settings.messages.leftform_input1 = "Field is required";

И, соответственно, как можно добавить правило валидации:

Вот рабочий сценарий для моего случая. Я использую метод jQuery extend() и перезаписываю правила валидации (а также соответствующие сообщения) объекта валидации, при переключении между двумя панелями.

jQuery

$('#toggleSwitch').click(function() {
    var settings = $('form').validate().settings;
    var leftForm = $('#leftform');
    var rightForm = $('#rightform');

    if (leftForm.css("visibility") !== "hidden") {
        leftForm.css("visibility", "hidden");
        rightForm.css("visibility", "visible");
        $.extend(settings, {
            rules: {
                rightform_input1: { required: true },
                rightform_input2: { required: true }
            },
            messages: {
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            }
        });
    } else {
        rightForm.css("visibility", "hidden");
        leftForm.css("visibility", "visible");
        $.extend(settings, {
            rules: {
                leftform_input1: { required: true },
                leftform_input2: { required: true }
            },
            messages: {
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            }
        });
    }
});

Источник

Комментарии к статье

Добавить комментарий