Главная
К библиотеке

Проверка данных в формах. Часть 2

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

Для начала рассмотрим основные принципы организации выполнения каких-либо действий при нажатии на кнопку отправки формы (Submit button). Предположим, что у нас имеется форма, в которой еще не реализована проверка:

<FORM NAME="test1" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали">
</FORM>

Для того, чтобы перед тем, как данные формы были отправлены на сервер, были произведены некоторые действия необходимо переписать последний элемент ввода следующим образом:

<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">

Функция checkIt() должна возвратить значение true, если все в порядке и false если данные не прошли проверку. Причем, необходимо обратить внимание на сопособ вызова этой функции в обработчике событий. Значение, выданное, функцией должно быть передано обратно в обработчик, чтобы стандартная процедура оптправки данных была выполнена.

Теперь рассмотрим, как мы можем получить доступ к полям формы из скрипта. Для этого используется массив document.forms.formName. Доступ к полям может быть осуществлен несколькими способами: по имени поля (атрибут NAME) - document.forms.test1.user или document.forms.test1["user"], по индексу - document.forms.test1[0]. Каждое поле имеет свойство value, которое содержит введенное значение.

Исходя из вышеизложенного, реализация процедуры проверки нашей формы может выглядеть так:

function checkIt() {
   if (document.forms.test2.user.value != "") {
      return true; // все отлично
   } else {
      alert("Поле 'имя' должно быть заполнено!");
	  return false;
   }
}

А форма будет выглядеть следующим образом:

<FORM NAME="test2" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">
</FORM>