JavaScript валидация (проверка) форм : Программирование для всех. Языки программирования, программирование баз данных, технологии. Статьи для програмиста скачать бесплатно учебники книги документация форум : Статьи

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

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

Форма:

• Код HTML

<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;

	}

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

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

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

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

Автор: Александр Бурцев, http://fastcoder.org/

При разработке CMS S.Builder наша команда активно использовала AJAX. Теперь вот решили поделиться накопленным опытом. Начнем с этого хабратопика. Не буду здесь затрагивать различные фреймворки и библиотеки. Свой код всегда роднее. Для работы с AJAX-ом в S.Builder написана библиотека sbAJAX. Можете качать и пользоваться :). В этом файле есть функция sbEvalJS. Для тех, кто не знает, объясню. При подгрузке через AJAX и вставке на страницу HTML-кода, содержащего JavaScript, JavaScript выполняться не будет или полезут баги. Эта функция как раз решает поставленную задачу.

Обзор нового релиза самой мощной Ajax библ....

Хотя наш обзор немного запоздал, оригинальный Dojo 1.2 вышел в релизной версии ещё 6-го октября, но сейчас мы наверстаем упущенное. И так, Dojo Toolkit — это самая мощная и гибкая ajax-библиотека из всех, что есть на рынке, она активно развивается и имеет большое комьюнити. Кстати, это самое комьюнити, совместно с компанией Sitepen, имеет ещё несколько проектов, среди которых и Cometd и некоторые другие, не менее интересные, о которых мы скоро вам расскажем. Сегодня же все внимание на флагманский продукт — Dojo 1.2.

Если вы профессиональный веб-разработчик и постоянно имеете дело с разработкой и отладкой сложных AJAX приложений, то наверняка знаете и используете Firebug — плагин для браузера Firefox, предназначенный для отладки и исследования веб-приложений. Текущая его версия, 1.2х достаточно стабильная и функциональна, чтобы помочь в 99% проблем, которые могут возникнуть при разработке. Но и этот инструмент не лишён если не недостатков, то некоторых фич, которые могли бы облегчить работу. И даже идеальный инструмент можно сделать ещё более идеальным, как бы это не звучало.