Статьи о Web дизайне
Функция проверки формы перед отправкой
Функция проверки формы перед отправкой
А теперь перейдем к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от нее требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых, отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции: <script language="JavaScript"> <!--function SendForm() { // Здесь мы разместим код функции return true; }//--></script>
Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста:
<script language="JavaScript">
<!--function SendForm() {if (document.forms[0].name.value == "") {
alert('Пожалуйста, введите Ваше имя');
document.mailform.name.focus();
return false
}if (document.forms[0].email.value == "") {
alert('Пожалуйста, введите электронный адрес');
document.mailform.email.focus();
return false }return true; }//-->
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
- сначала проверяем, что данное поле является пустым. И если это так, то
- выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
- воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
- выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Содержание раздела
