Часто приходится проверять заполнение форм перед их отправкой.
Чтобы автоматизировать работу, написан небольшой объектно-ориентированный валидатор.
01 // Для облегчения рутинных операций по манипуляциям с содержимым, атрибутами и т.д.
02 function elem(elemid){
03 var el = {
04 attr: function(name,value){
05 var oldval = this.obj.getAttribute(name);
06 if(value) this.obj.setAttribute(name,value);
07 return oldval;
08 },
09 html: function(htm){
10 var oldhtm = this.obj.innerHTML;
11 if(htm) this.obj.innerHTML = htm;
12 return oldhtm;
13 },
14 text: function(txt){
15 var oldtxt = this.obj.innerText;
16 if(txt) this.obj.innerText = txt;
17 return oldtxt;
18 },
19 append: function(htm){
20 var oldhtm = this.obj.innerHTML;
21 if(htm) this.obj.innerHTML += htm;
22 return oldhtm;
23 },
24 children: function(tag){
25 return this.obj.getElementsByTagName(tag);
26 },
27 hide: function(){
28 this.obj.style.olddisplay = this.obj.style.display;
29 this.obj.style.display = 'none';
30 return this.obj.style.olddisplay;
31 },
32 show: function(){
33 if(this.obj.style.olddisplay) this.obj.style.display = this.obj.style.olddisplay;
34 else this.obj.style.display = 'block';
35 return this.obj.style.display;
36 },
37 addevent: function(name,handler){
38 this.obj["on"+name] = handler;
39 }
40 };
41
42 if(typeof(elemid) == "object") el.obj = elemid;
43 else { el.obj = document.getElementById(elemid); el.id = elemid;}
44 return el;
45 }
46
47 function validator(form){
48 var v = {
49 //Указать элемент формы как обязательный для заполнения
50 required: function(name, msg){
51 var input = this.form.elements[name];
52 input.required = true;
53 input.msg = msg;
54
55 //Для того, чтобы было видно, что элемент обязателен для заполнения,
56 //комментарий к нему должен быть заключен в тег <label>
57 var labels = elem(this.form).children('label');
58 for(var i = 0; i < labels.length; i++){
59 if(elem(labels[i]).attr('for') == name)
60 {
61 //добавить в конец подписи к полю знак, что оно обязательно к заполнению
62 elem(labels[i]).append('<span style="color: red; ">*</span>');
63 break;
64 }
65 }
66
67 },
68 //Функция проверки форм
69 check: function(){
70 var form = this.form;
71 for(var i = 0; i < form.elements.length; i++){
72 if(form.elements[i].required) {
73 if(form.elements[i].value == ''){
74 alert(form.elements[i].msg);
75 form.elements[i].focus();
76 return false;
77 }
78 }
79 }
80 return true;
81 },
82
83 //Настроить форму для автоматической проверки формы перед отправкой
84 autocheck: function(){
85 this.form.onsubmit = function(e){
86 e = e || window.event;
87 var form = target = e.target || e.srcElement;
88 return validator(form).check();
89 }
90 }
91 }
92
93 if(typeof(form) == "object") v.form = form;
94 else { v.form = document.forms[form]; }
95
96 return v;
97 }
Пример:
validator('myform').required('name','Введите имя');
validator('myform').required('message','Введите сообщение');
validator('myform').autocheck();
Протестировано в браузере Firefox.
UPD: В Internet Explorer 8 тоже работает.