JavaScript валидация (проверка) форм

Задача: сделать универсальную функцию для прохождения по полям формы с возможностью проверки введенных данных

Действительно, удобнее проверять форму пока она не "ушла" на сервер, чем после отправки возвращать пользователю HTML-страницу с той же формой и списком ошибок (хотя серверная проверка необходима, из соображений безопасности и на случай отключенного JavaScript). Попытаемся набросать JavaScript-функцию, которая будет проходить по всем элементам формы, определять их тип и совершать действия по проверке данных. В качестве аргумента функция примет ссылку на саму форму. Удобнее всего её вызывать по событию onsubmit.

Форма:

<form onsubmit="return checkForm(this);">
 <input type="hidden" />
 Имя: <input type="text" name="name" /><br/>
 E-mail: <input type="text" name="email" /><br/>
 <br/>
 Интересы:<br/>
 <input type="checkbox" name="inter[]" value="music" /> Music<br/>
 <input type="checkbox" name="inter[]" value="TV" /> TV<br/>
 <br/>
 Возраст:<br/>
 <input type="checkbox" name="age" value="10-25" /> 10-25<br/>
 <input type="checkbox" name="age" value="25-50" /> 25-50<br/>
 <input type="checkbox" name="age" value="50+" /> 50+<br/>
 <br/>
 Любимое время суток: <br/>
 <select>
 <option value="0" selected="1">Выберите...</option>
 <option value="1">Утро</option>
 <option value="2">День</option>
 <option value="3">Вечер</option>
 <option value="4">Ночь</option>
 </select><br/>
 <br/>
 Комментарий:<br/>
 <textarea></textarea><br/>
 <br/>
 Прикрепить файл:<br/>
 <input type="file" name="name" /><br/>
 <br/>
 <input type="submit" value="Отправить" />
</form>
Валидация формы регистрации с помощью JavaScript

В форму вошло максималное число разнообразных полей.
Теперь код JavaScript-функции:

function checkForm(form) {
 // Заранее объявим необходимые переменные
 var el, // Сам элемент
 elName, // Имя элемента формы
 value, // Значение
 type; // Атрибут type для input-ов
 // Массив списка ошибок, по дефолту пустой
 var errorList = [];
 // Хэш с текстом ошибок (ключ - ID ошибки)
 var errorText = {
 1 : "Не заполнено поле 'Имя'",
 2 : "Не заполнено поле 'E-mail'",
 3 : "Не прикреплен файл",
 4 : "Не оставлен комментарий",
 5 : "Не выбрано любимое время суток"
 }
 // Получаем семейство всех элементов формы
 // Проходимся по ним в цикле
 for (var i = 0; i < form.elements.length; i++) {
 el = form.elements[i];
 elName = el.nodeName.toLowerCase();
 value = el.value;
 if (elName == "input") { // INPUT
 // Определяем тип input-а
 type = el.type.toLowerCase();
 // Разбираем все инпуты по типам и обрабатываем содержимое
 switch (type) {
 case "text" :
 if (el.name == "name" && value == "") errorList.push(1);
 if (el.name == "email" && value == "") errorList.push(2);
 break;
 case "file" :
 if (value == "") errorList.push(3);
 break;
 case "checkbox" :
 // Ничего не делаем, хотя можем
 break;
 case "radio" :
 // Ничего не делаем, хотя можем
 break;
 default :
 // Сюда попадают input-ы, которые не требуют обработки
 // type = hidden, submit, button, image
 break;
 }
 } else if (elName == "textarea") { // TEXTAREA
 if (value == "") errorList.push(4);
 } else if (elName == "select") { // SELECT
 if (value == 0) errorList.push(5);
 } else {
 // Обнаружен неизвестный элемент ;)
 }
 }
 // Финальная стадия
 // Если массив ошибок пуст - возвращаем true
 if (!errorList.length) return true;
 // Если есть ошибки - формируем сообщение, выовдим alert
 // и возвращаем false
 var errorMsg = "При заполнении формы допущены следующие ошибки:nn";
 for (i = 0; i < errorList.length; i++) {
 errorMsg += errorText[errorList[i]] + "n";
 }
 alert(errorMsg);
 return false;
}

Как видно из скрипта, он не подходит для всех случаев, а по-другому и быть не может. Требования к проверке каждой формы индивидуальны. Однако, незначительная модификация условий в этой функции позволит проверить передаваемые данные из любой формы.

Замечание от cruel angel

Удобней для пользователя делать проверку не по событию onsubmit, а непосредственно при заполнении полей данными.