[Из песочницы] Удобная работа с Jquery Validation через атрибуты class01.02.2013 17:01


Недавно начал разрабатывать одно приложение на Zend Framework. И столкнулся с одной проблемой. Данная проблема известна многим (если не всем) web программистам. А называется она «Валидация форм на клиенте».
В моем проекте используется jQuery фреймворк. В нем имеется плагин для валидации форм jQuery Validation
Но в нем мне не понравился тот факт, что для каждого элемента формы нужно описывать правила валидации, а это очень много лишнего текста. Особенно если у меня много форм. Люди знакомые с ним поймут меня. И я подумал, а что если привязать эти правила к атрибутам class элементов формы. Ведь когда создаешь формы с использованием Zend Form, подключение валидации намного удобнее делать именно так. В итоге я написал небольшую библиотеку. Скорее даже дополнение к библиотеке, которое позволяет сделать такое подключение валидатора. Вообще следя за тенденциями развития html 5, можно сказать, что в будущем эта библиотека будет нужна только для нестандартной валидации. Но пока еще не наступили те прекрасные времена, так что я продолжу.
Необходимые вещи для данного злодейства:

Для включения этой библиотеки достаточно сделать следующее:
$(document).ready(function(){
	$(document).connectValidator();
});

Работает эта штука следующим образом. После загрузки страницы запускается метод connectValidator, с селектором на объект где находятся формы, которые мы хотим проверять. В моем случае это $(document).
Метод просматривает все формы в блоке и находит нужные классы.
Названия классов для связки с методами из jQuery Validation можно изменять в настройках. Также можно задать префикс для всех названий. Вот список названий классов из стандартных настроек.
Метод из библиотеки Имя класса в дополнении
required: true class=«required»
email: true class=«email»
url: true class=«url»
date: true class=«date»
dateISO: true class=«dateISO»
number: true class=«number»
digits: true class=«digits»
creditcard: true class=«creditcard»

Так же библиотека понимает и вот эти значения:
Метод из библиотеки Имя класса в дополнении
minlength: 3 minlength=«3»
maxlength: 4 maxlength=«4»
min: 13 min=«13»
max: 23 max=«23»
range: [13, 23] min=«13» max=«23»
rangelength: [2, 6] minlength=«2» maxlength=«6»

Помимо простых проверок, можно использовать составные.
На сегодняшний день поддерживаются следующие методы.
Метод из библиотеки Имя класса в дополнении
equalTo: "# id-field" class=«equalTo» data-equalTo=" id-field "
extension: «xls|csv» class=«extension» data-extension = '{«types»:[«xls»,«csv»]}'
remote: {url: 'remote_script.php',data: {...}} class=«remote» data-remote = '{«url»:«remote_script.php»,«data»:[«id1»,«id2»,«id3»]}'

Ну вот и все, что сейчас поддерживает эта штука.
Так же в настройках можно задать настройки для jQuery Validation. Эти настройки просто записываются в customConfigValidator.
По умолчанию это:
customConfigValidator:{
	debug: true,
	submitHandler: function(form) {
		form.submit();
	}				
}

В моем же случае все намного страшнее. Помимо этих библиотек я еще использую jQuery Form Plugin. И моя настройка выглядит следующим образом:
var formResponse = '';
$(document).ready(function()
{
		var options = {
			customConfigAjax:{
					beforeSubmit: function(arr, $form, options) { 
						preload_open();
						// тут можно подумать о переработке данных
					},
					success: function(response) {
						formResponse=response;
						preload_close();
						reactionOnSubmit();
					},
					error:function() {
						preload_close();
						alert('Unknown error');
					}			
			},
			customConfigValidator:{
				submitHandler: function(form) {
					if ($(form).hasClass("AjaxForm")) 
					{				
						$(form).ajaxSubmit(options.customConfigAjax);
					}
					else{
						form.submit();
					}
				},
				invalidHandler: function(form, validator) {
				var errors = validator.numberOfInvalids();
				}
			}
		};

	$(document).connectValidator(options);
	function reactionOnSubmit()
	{
		alert(formResponse)
	}		
});

Как видно из настроек, если форма валидна идет проверка на наличие у формы класса AjaxForm. Если класс найден, то идет Ajax отправка формы.
Если же класс не найден то следует обычная отправка.
Также в настройках для connectValidator можно писать настройки для любых других библиотек. Как например настройка customConfigAjax.
Вот вроде и все что я хотел рассказать. Если есть пожелания или советы, то я с удовольствием выслушаю их.
Спасибо за внимание.

Полезные ссылки

© Habrahabr.ru