webew
Войти » Регистрация
 
JavaScript

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

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

Действительно, удобнее проверять форму пока она не "ушла" на сервер, чем после отправки возвращать пользователю 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;
}


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


// Все права на статью JavaScript::JavaScript валидация (проверка) форм принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: