Web Creation - еженедельный сетевой журнал для вебмастеров

   
Проверка ввода в формах

Автор: Alexander Suhhinin
Информация взята с сайта shurick31.narod.ru

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

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

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

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

Известно, что HTML документ имеет объектно-ориентированную структуру, а посему, с помошью свойств и методов можно проверять объекты типа "элемент формы" на наличие в них данных.
Простейший пример - проверяет, введена ли информация в поле:
Name
E-mail
Comment
Посмотрим, как оно работает. В первую очередь, форма.
<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;
}
Все просто до безобразия. Эти две функции написаны на все случаи жизни - не привязаны не к именам полей, ни к именам форм. Их можно использовать в любых HTML формах для проверки правильности форм. Главное - необходимым полям установить атрибут required, и в тэг описания формы вставить вызов функции checkform(this).

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

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


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

Автор: Alexander Suhhinin
Информация взята с сайта shurick31.narod.ru

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин