Библиотека Интернет Индустрии I2R.ru

Отправка данных формы происходит по нажатию на кнопку Submit. Часто при этом возникает задача проверить вначале данные на корректность и только в случае их правильности отсылать на сервер. В противном случае, следует вывести предупреждение об ошибке и вернуться к редактированию. Такая тактика называется «защита от дурака» и она не позволяет вводить заведомо неверные данные. Например, вы хотите от посетителя обязательно получить адрес электронной почты. Тогда во введенной строке должен содержаться символ @, который однозначно определяет, что это именно адрес, а не что иное, и не какой-нибудь адрес, а именно электронный. Также не должно быть пробелов и других недопустимых символов вроде русских букв. Только после того, как скрипт все проверит и даст добро, форму можно отправлять на сервер.

Для «ручной» отправки формы на сервер существует метод submit. Его использование таково (пример 1).

Проверку данных лучше всего оформить в виде отдельной функции и обращаться к ней при необходимости (пример 2). В данном случае создается функция validForm, которая проверяет, чтобы введенное в текстовом поле значение было больше нуля, но меньше десяти. При вводе текста или иного числа выводится предупреждение, сами данные формы отправляются только при корректно заданном числе.

Пример 2. Проверка данных формы

В примере отправка данных происходит только после выполнения нашей собственной функции validForm. Чтобы не обращаться к форме через семейство forms, можно передать в качестве параметра ключевое слово this. Это гораздо короче и удобней, в самой функции теперь достаточно использовать f.submit() для отправки, где f — аргумент функции, указывающий на форму. Строку «return false» при вызове события onSubmit добавить надо обязательно. Она отвечает за то, чтобы данные не отправлялись на сервер после завершения работы функции validForm.

Еще один способ отправки данных формы на сервер с предварительной их проверкой заключается в использовании события onClick. В форму добавляется обычная кнопка, на которую это событие и <навешиваем> (пример 3).

Пример 3. Использование события onClick

Событие onSubmit, которое указано в теге FORM вроде и не нужно, но оно выполняет определенную задачу. Данные формы можно отправить на сервер и нажатием на кнопку Enter клавиатуры, когда фокус находится на элементе формы. Тогда происходит отправка на сервер, минуя наше событие onClick и соответственно проверку данных. Чтобы это не случилось, добавляем строку onSubmit="return false".

После получения введенного в текстовом поле значения, идет проверка на то, что это число и что оно меньше десяти, но больше нуля. Только в этом случае запускается метод submit. Обратите внимание, в данном случае аргументом функции validForm служит ключевое слово this.form, а не this, как в примере 2.