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г.


Автор: Гость (не зарегистрирован), дата: 12 апреля, 2022 - 22:17
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 6 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Jason Bourne
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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