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

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

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

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

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

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

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

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-скрипт и предусматривать внештатные ситуации типа несовпадения типов данных.