jquery.vr.js

/**
 * https://github.com/unlike777/jquery-myValidator.js
 * jQuery Validate Plugin v0.5
 *
 * Copyright 2014 UNLIKE
 * Released under the MIT license
 * 
 * css classes for validation
 * .vr-required - поле обязательно для заполнения
 * .vr-email - проверка на эл. почту
 * .vr-url - проверка на ссылку
 * .vr-num - проверка на число
 * .vr-not-clean - не очищать поле после отправки формы
 * 
 * attributes for validation
 * vr-name - имя поля, необходимо для уведомлений
 * vr-min-length - минимально допустимая длинна
 * vr-max-length - максимально допустимая длинна
 * vr-accordance - Название поля которому должно соответсвовать проверяемое поле
 * 
 * css classes generated by plugin
 * .vr-error - поле не валидное
 * .vr-correct - поле прошло проверку
 * .vr-touched - поле было изменено, поэтому можно начать проверку
 * 
 * additional fields
 * .vr-notice-{input name} - контейнер для отображения ошибки конкретного поля
 */

(function( $ ) {
	$.fn.myValidator = function(options) {
		
		var $form, 			// форма
			$inputs, 		// поля для проверки 
			_check = true; 	//проверка на множественное срабатывание валидации
		
		//дефолтные настройки
		var settings = $.extend( {
			//уведомление об ошибки в поле, $this - указывает на поле
			notice: function($this, text) {
				$this.focus(); 
				alert(text);
			},
			//$this - указывает на форму, clean - функция очистки формы
			onSubmit: function($this, clean) {
				//clean(); //если форма отправляется ajax'ом можно ее очистить
			},
			//$this - указывает на форму
			beforeSubmit: function($this) {
				
			},
			//$this - указывает на форму
			afterSubmit: function($this) {
				
			},
			reEmail: /^([a-z0-9\.\-\_])+\@(([a-zA-Z0-9\-\_])+\.)+([a-zA-Z0-9]{2,4})+$/i,
			reUrl: /(([a-z0-9\-\.]+)?[a-z0-9\-]+(!?\.[a-z]{2,4}))/i
		}, options);
		
		//Нужно поменять макросы в тексте на значения в массиве
		function parse(keys, text) {
			$.each(keys, function(key, val) {
				text = text.replace('{'+key+'}', val);
			});
			return text;
		}
		
		//Вспомогательная функция для определения имени поля, учитывает что атрибут vr-name может быть не задан
		function getInpName($inp) {
			return (($inp.attr('vr-name') !== undefined) && ($inp.attr('vr-name') != '')) ? $inp.attr('vr-name') : $inp.attr('name');
		}
		
		//Проверить конкретное поле и вернуть текст ошибки, если поле не прошло проверку, или true если все ок
		function check($inp) {
			var val = $.trim($inp.val()),
				name = getInpName($inp);
			
			if ($inp.hasClass('vr-required')) {
				if (val == '') {
					return parse({name: name}, 'Поле "{name}" обязательно для заполнения');
				}
			}

			var min_len = $inp.attr('vr-min-length');
			//условие срабатывает только, если есть какое-то значение 
			if (val != '' && min_len > 0) {
				if (val.length < min_len) {
					return parse({name: name, min_len: min_len}, 'Количество символов для поля "{name}" не должно быть меньше {min_len}');
				}
			}

			var max_len = $inp.attr('vr-max-length');
			if (min_len > 0) {
				if (val.length < max_len) {
					return parse({name: name, max_len: max_len}, 'Количество символов для поля "{name}" не должно быть больше {max_len}');
				}
			}

			
			if ($inp.hasClass('vr-email')) {
				if (!settings.reEmail.test(val)) {
					return parse({name: name}, 'Для поля "{name}" эл. почта указана в неправильном формате');
				}
			}

			if ($inp.hasClass('vr-url')) {
				if (!settings.reUrl.test(val)) {
					return parse({name: name}, 'Для поля "{name}" ссылка указана в неправильном формате');
				}
			}

			if ($inp.hasClass('vr-num')) {
				if ( val != 0 ) {
					if ( !(val / val) ) {
						return parse({name: name}, 'Поле "{name}" не является числом');
					}
				}
			}

			var accordance = $inp.attr('vr-accordance'),
				$accord = $form.find('input[name="'+accordance+'"]:first');
			if ($accord.length > 0) {
				var acc_val = $.trim($accord.val()),
					acc_name = getInpName($accord);
				
				if (val != acc_val) {
					return parse({name1: acc_name, name2: name}, 'Поля "{name1}" и "{name2}" должны соответсвовать');
				}
			}
			
			return true;
		}
		
		//финальная проверка, в момент отправления формы
		function final_check() {
			var ret = true;

			$inputs.each(function() {
				var $inp = $(this),
					error_text = check($inp);
				
				if (error_text !== true) {
					ret = false;
					settings.notice($inp, error_text);
					return false;
				}
				
				return true;
			});
			
			return ret;
		}

		//Проверяем форму в реальном времени
		function validate() {

			$inputs.each(function() {
				var $inp = $(this),
					$inp_name = $inp.attr('name'),
					$notice_class = '.vr-notice-'+$inp_name;
				
				//если поле уже было тронуто
				if ($inp.hasClass('vr-touched')) {
					
					var error_text = check($inp);
					
					if (error_text !== true) {
						$inp.removeClass('vr-correct').addClass('vr-error');
						if ($inp_name != '') {
							$form.find($notice_class).html(error_text);
						}
					} else {
						$inp.removeClass('vr-error').addClass('vr-correct');
						if ($inp_name != '') {
							$form.find($notice_class).html('');
						}
					}
					
				}
			});
			
		}
		
		//запаздалая валидация
		function belatedValidate() {
			if (_check) {
				_check = false;
				setTimeout(function() {
					validate();
					_check = true;
				}, 1);
			}
		}
		
		function clean() {
			$inputs.not('.vr-not-clean')
				.removeClass('vr-touched')
				.removeClass('vr-correct')
				.removeClass('vr-error')
				.val('');
		}
		
		return this.each(function() {

			//запоминаем текущую форму 1 раз, чтобы каждый раз не искать в dom дереве
			$form = $(this);
			
			//запоминаем поля участвующие в проверке
			$inputs = $form.find('input, textarea').not('input[type="submit"]');
			
			/****************************************************/
			//нужно отделить уже измененные поля от еще не тронутых
			$inputs.on('blur', function() {
				$(this).addClass('vr-touched');
				belatedValidate();
			});

			//также смотрим на уже заполненные поля
			$inputs.each(function() {
				var $inp = $(this);
				if ($.trim($inp.val()) != '') {
					$inp.addClass('vr-touched');
				}
			});
			/****************************************************/
			
			$form.on('submit', function(e) {

				var check = settings.beforeSubmit($form) === false ||
							final_check() === false ||
							settings.onSubmit($form, function() {clean();}) === false ||
							settings.afterSubmit($form) === false;
				
				if (check) {
					e.preventDefault();
				}
				
			});
			
			$form.on('mouseup keyup input', function() {
				belatedValidate();
			});
			
		});

	};
})(jQuery);