Главная » Полезные статьи » Язык JavaScript » JavaScript валидация (проверка) форм
Распечатать статью

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

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

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

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

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

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

Похожие статьи