Как удалять, менять или добавлять правила валидации на странице, используя плагин 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"
}
});
}
});
Источник
Комментарии к статье