Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Динамические формы - проверка ввода на JavaScript

Источник: realcoding.net

При разработке страниц, содержащих HTML формы ввода, нужно всегда помнить, что есть обязательная информация, есть необязательная. Если пользователь при вводе, например, не заполнит обязательное поле email, то на сервере в момент отработки скрипта и записи в базу данных может возникнуть ошибка.

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

Но каждая передача данных на сервер - это лишнее время (с точки зрения пользователя), и лишняя загрузка сервера, на котором исполняется CGI-скрипт, что опять-таки за собой тянет увеличение времени ожидания. Поэтому, имея практически на каждом компьютере такие мощные средства, как JavaScript, реализованные в браузерах версий 4 и выше, вполне можно заставлять страницу саму себя проверять на корректность ввода данных в формы.

Известно, что HTML документ имеет объектно-ориентированную структуру, а посему, с помощью свойств и методов можно проверять объекты типа элемент формы на наличие в них данных.

В первую очередь, форма.

<form onSubmit = "return checkform(this)">
<table>
<tr>
<td>Name</td><td><input type="text" name="name" required></td></tr>
<tr><td>E-mail</td><td><input type="text" name="email" required></td></tr>
<tr><td>Comment</td><td><input type="text" name="comment"></td></tr>
<tr><td><input type="submit"></td><td><input type="reset"></td></tr>
</table>
</form>

Стоит обратить внимание на две вещи:

  1. Вызов функции checkform() на событие onSubmit(т.е. на нажатие кнопки Submit)
  2. Атрибут required в двух полях - Name и E-mail

Значит в момент отправки формы вызывается функция checkform(). Вот она:

function checkform(f) {
 var errMSG = "";
 // цикл ниже перебирает все элементы в объекте f,
 // переданном в качестве параметра
 // функции, в данном случае - наша форма.            
 for (var i = 0; i<f.elements.length; i++)
   // если текущий элемент имеет атрибут required
   // т.е. обязательный для заполнения
   if (null!=f.elements[i].getAttribute("required"))
      // проверяем, заполнен ли он в форме
       if (isEmpty(f.elements[i].value)) // пустой
           errMSG += "  " + f.elements[i].name + "\n"; // формируем сообщение
                                                      // об ошибке, перечисляя
                                                      // незаполненные поля
       // если сообщение об ошибке не пусто,
       // выводим его, и возвращаем false    
       if ("" != errMSG) {
           alert("Не заполнены обязательные поля:\n" + errMSG);
           return false;
       }
}

В общем - все понятно: передаем в качестве параметра форму, перебираем все элементы, если элемент имеет атрибут required, - проверяем его функцией isEmpty(). Если функция возвращает истину, - то строка пустая, если нет - то заполнена. Если строка пустая, то имя этого поля добавляется в переменную errMSG. Если errMSG оказывается не пустой строкой, то выводим сообщение об ошибке, и возвращаем в форму false, вследствие чего форма не отправляется на сервер.

Функция isEmpty():

function isEmpty(str) {
  for (var i = 0; i < str.length; i++)
     if (" " != str.charAt(i))
         return false;
     return true;
}

Проверка правильности заполнения формы во время ввода


Можно проверять заполнение формы во время ввода данных в элементы управления. При этом надо отрабатывать события на этих элементах.

В данном случае обрабатывается событие onKeyPress.:

<input  type="text" size="4"   onKeyPress ="if ((event.keyCode < 48) (event.keyCode > 57))  event.returnValue = false;">

Где event.keyCode = скан-код нажатой клавиши.

Можно проверять элементы формы во время заполнения формы. Для этого нужно отрабатывать событие OnChange:

В данном случае после изменения поля отрабатывает скрипт, который проверяет, что было введено - текст или число, и изменяет стиль оформления данного элемента управления.:

<input type="text" size=3 title="Введите число" onChange="check_it();">

Если использовать проверку правильности заполнения формы с помощью JavaScript , то можно здорово облегчить жизнь и пользователю и себе, особенно, когда придется писать CGI-скрипт и предусматривать внештатные ситуации типа несовпадения типов данных.



Похожие статьи:
- Как оживить Perl/CGI скрипт
- Для создания бегущей строки существуют теги
- JavaScript и объектная модель
- Регистрация сайта в каталогах. Кого выбрать? Обзор сервисов.
- Использование специальных операторов в условиях
- Базы данных на ПК
- SQL: универсальный язык для работы с базами данных
- Сжатие данных в целях экономии места и ускорения работы Oracle
- Выполнение триггеров в определенном порядке
- "Живые меню" или "Как сделать красиво с помощью CSS и JavaScript"
- Краткий обзор некоторых возможностней MySQL. Советы по оптимизации.
- Рекомендации Защиты (MySQL и SQL Web-интерфейс)
- Репликация MySQL


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]