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

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

Автор: нет данных