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-функции:

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;
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 = "При заполнении формы допущены следующие ошибки:\n\n";
for (i = 0; i < errorList.length; i++) {
errorMsg += errorText[errorList] + "\n";
}
alert(errorMsg);
return false;
}

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

Пример валидации формы с помощью JavaScript-функции

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

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