Простой валидатор форм
Часто приходится проверять заполнение форм перед их отправкой.
Чтобы автоматизировать работу, написал небольшой объектно-ориентированный валидатор.
// Для облегчения рутинных операций по манипуляциям с содержимым, атрибутами и т.д.
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 тоже работает.
|
Огромное спасибо вам, второй день уже пытаюсь организовать что то подобное. пересмотрел уже кучу сайтов вы Реально помогли - спасибо !
Я просто счастлив
не актуально на 2020г.
Roksa szwecja
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.