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

Рассматриваемые в этой статье возможности подразумевают использование в качестве броузера Netscape Navigator 3

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

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

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

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

Name
E-mail
Comment

Посмотрим, как оно работает. В первую очередь, форма.

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

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

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

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

Функция isEmpty():

Все просто до безобразия. Эти две функции написаны на все случаи жизни - не привязаны не к именам полей, ни к именам форм. Их можно использовать в любых HTML формах для проверки правильности форм. Главное - необходимым полям установить атрибут required, и в тэг описания формы вставить вызов функции checkform(this).

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

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


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

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

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

Попробуйте ввести в это поле число или текст  

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

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



Опубликовал admin
19 Ноя, Среда 2003г.



Программирование для чайников.