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

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

Для обеспечения правильности заполнения форм, желательно проверить введенные данные до того, как они будут переданы обработчику.

Допустим, что у нас на странице есть следующая форма:

Предположим, что поле "Возраст" является обязательным. Можно произвести проверку и после того, как содержимое формы будет передано удаленному обработчику, но, если отправитель не ввел это значение, то, гораздо быстрее, будет отследить это на локальной машине. Для этого необходимо переопределить событие формы onSubmit Выглядеть это должно таким образом:

<FORM ONSUBMIT="return checkVals(this)">

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

<FORM ONSUBMIT="return checkVals(this)">
  <INPUT TYPE="Text" NAME="firstName" SIZE="15" MAXLENGTH="30">
  <INPUT TYPE="Text" NAME="lastName" SIZE="15" MAXLENGTH="30">
  <INPUT TYPE="Text" NAME="age" SIZE="3" MAXLENGTH="3">
  <INPUT TYPE="Submit" NAME="SUBMIT" VALUE="Ok">
</FORM>

Функция проверки выглядит так:

   function checkVals(f) {
     if ((f.age.value.length == 0) || (isNaN(f.age.value))) {
	       alert("Age is required!\n" + "You enter: " + f.age.value);
		   return false;
	    }
   }

Необходимо заметить, что в данном примере опущены все элементы "украшательства", да и форма без атрибута ACTION, практически не имеет никакого смысла, но вы сможете сами все это добавить. Единственное, чем эта форма отличается от любой другой, это проверка данных перед отправкой.