Javascript.RU

Простой валидатор форм

Часто приходится проверять заполнение форм перед их отправкой.
Чтобы автоматизировать работу, написал небольшой объектно-ориентированный валидатор.

// Для облегчения рутинных операций по манипуляциям с содержимым, атрибутами и т.д. 
function elem(elemid){
	var el = {
		attr: function(name,value){
			var oldval = this.obj.getAttribute(name);
			if(value) this.obj.setAttribute(name,value);
			return oldval;
		},
		html: function(htm){
			var oldhtm = this.obj.innerHTML;
			if(htm) this.obj.innerHTML = htm;
			return oldhtm;
		},
		text: function(txt){
			var oldtxt = this.obj.innerText;
			if(txt) this.obj.innerText = txt;
			return oldtxt;
		},
		append: function(htm){
			var oldhtm = this.obj.innerHTML;
			if(htm) this.obj.innerHTML += htm;
			return oldhtm;
		},
		children: function(tag){
			return this.obj.getElementsByTagName(tag);
		},
		hide: function(){
			this.obj.style.olddisplay = this.obj.style.display;
			this.obj.style.display = 'none';
			return this.obj.style.olddisplay;
		},
		show: function(){
			if(this.obj.style.olddisplay) this.obj.style.display = this.obj.style.olddisplay;
			else this.obj.style.display = 'block';
			return this.obj.style.display;
		},
		addevent: function(name,handler){
			this.obj["on"+name] = handler;
		}
	};

	if(typeof(elemid) == "object") el.obj = elemid;
	else { el.obj =  document.getElementById(elemid); el.id = elemid;}
	return el;
}

function validator(form){
	var v = {
		//Указать элемент формы как обязательный для заполнения
		required: function(name, msg){
			var input = this.form.elements[name];
		    input.required = true;
		    input.msg = msg;

		    //Для того, чтобы было видно, что элемент обязателен для заполнения, комментарий к нему должен быть заключен в тег <label>
		    var labels = elem(this.form).children('label');
		    for(var i = 0; i < labels.length; i++){
		        if(elem(labels[i]).attr('for') == name)
		        {
		        	//добавить в конец подписи к полю знак, что оно обязательно к заполнению
		        	elem(labels[i]).append('<span style="color: red; ">*</span>');
		        	break;
		        }
		    }

		},
		//Функция проверки форм
		check: function(){
			var form = this.form;
			for(var i = 0; i < form.elements.length; i++){
	            if(form.elements[i].required) {
	            	if(form.elements[i].value == ''){
		            	alert(form.elements[i].msg);
		            	form.elements[i].focus();
		            	return false;
	            	}
	            }
	        }
	        return true;
		},

		//Настроить форму для автоматической проверки формы перед отправкой
		autocheck: function(){
			this.form.onsubmit = function(e){
				e = e || window.event;
				var form = target = e.target || e.srcElement;
				return validator(form).check();
			}
		}
	}

	if(typeof(form) == "object") v.form = form;
	else { v.form =  document.forms[form]; }

	return v;
}

Пример:

validator('myform').required('name','Введите имя');
validator('myform').required('message','Введите сообщение');
validator('myform').autocheck();

Планирую сделать проверку полей типа radio, checkbox, select.
Протестировано в браузере Firefox.

UPD: В Internet Explorer 8 тоже работает.

+5

Автор: Delphi (не зарегистрирован), дата: 18 июля, 2010 - 21:56
#permalink

Огромное спасибо вам, второй день уже пытаюсь организовать что то подобное. пересмотрел уже кучу сайтов вы Реально помогли - спасибо !
Я просто счастлив


Автор: Гость (не зарегистрирован), дата: 13 октября, 2020 - 21:46
#permalink

не актуально на 2020г.


 
Поиск по сайту
Другие записи этого автора
Jason Bourne
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние темы на форуме
Forum