Проверка данных текстового элемента перед передачей результатов заполнения формы
Проверка данных однострочного или многострочного поля ввода текста перед передачей результатов формы на сервер, как правило, включает проверку данных введенных посетителем в поле. Предположим, например, что HTML-код Web-страницы содержит следующее описание формы, которая запрашивает у посетителя его имя и адрес электронной почты:
<form name="ExampleForm"action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI"method="POST" enctype="application/x-www-form-urlencoded">Имя: <input type="text" name="FirstName" id="FN" size="15"/><br/>Фамилия: <input type="text" name="LastName" id="LN" size="20"/><br/>Адрес E-mail: <input type="text" name="Email" id="EM" size="30"/><br/><p><input type="submit" value="Отправить"/><input type="reset" value ="Очистить"/></р></form>
ПРАКТИКУМ
Дабы убедиться в том, что посетитель ввел данные в поле адреса электронной почты, можно вставить JavaScript-сценарий, который будет выполнять "проверку"содержимого поля формы. JavaScript-сценарий должен быть помещен между начальным и конечным дескрипторами сценария (<script></script>). Несмотряна то что сценарий можно разместить в любом месте HTML-кода Web-страницы, функции проверки данных рекомендуется помещать непосредственно после начального дескриптора <body> кода страницы. (Размещение всех сценариев в одном месте кода страницы позволяет легко их находить в случае, когда необходимо посмотреть, что, собственно, делает код страницы.) Таким образом, чтобы убедиться, что посетитель ввел данные в поле адреса электронной почты в настоящем примере, HTML-код Web-страницы должен выглядеть примерно так:
<html><body><head><script type="text/javascript" language="JavaScript"><!--function ValidateForm(Form){if (Form.Email.value == ""){alert("Пожалуйста, введите хоть что-нибудь в поле \"Адрес E-mail\".");Form.Email.focus ();return(false);}else return(true);}//--></script>
Начальный и конечный дескрипторы комментария (<!-- и -->), которые заключают в себе JavaScript-сценарий, не оказывают влияния на Web-браузеры, которые имеют возможность читать и выполнять JavaScript-сценарии. Тем не менее, начальный и конечный дескрипторы комментария предотвращают вывод на экран кода JavaScript-сценария в Web-браузерах, не поддерживающих сценарные языки.
Рис. 3.6. Диалоговое окно предупреждения, выводимое в случае, если не заполнено поле ввода адреса электронной почты
В первой строке сценария объявляется функция ValidateForm, и, таким образом, в дальнейшем на нее можно ссылаться по этому имени. Вторая и третья строки кода проверяют значение поля формы с именем Email и в случае, если текстовое поле Email при выполнении сценария Web-страницы окажется пустым, выводят на экран показанное на рис. 3.6 диалоговое окно предупреждения.
Если поле Email не содержит данных, четвертая и пятая строки JavaScript-сценария (расположенные после вызова метода alert()) перемещают фокус на поле ввода Email и возвращают значение False HTML-дескриптору, который "вызвал" функцию.
Для того чтобы Web-браузер выполнял функцию ValidateForm() при нажатии посетителем кнопки Submit, в дескриптор <form> формы необходимо добавить атрибут onSubmit, который выглядит следующим образом:
<form name="ExampleForm"onSubmit="return ValidateForm(ExampleForm)"action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI"method="POST" enctype="application/x-www-form-urlencoded">
Не пропустите ключевое слово return, которое находится перед вызовом функции validateForm(). В противном случае Web-браузер передаст результаты формы Web-серверу, даже если функция validateForm() вернет значение False, указывающее на наличие ошибок во введенной на форму информации.
Если все атрибуты дескриптора введены без ошибок (как в приведенном примере), атрибут onSubmit заставит Web-браузер после нажатия посетителем кнопки Submit выполнить JavaScript-сценарий для проверки результатов формы. Если функция ValidateForm() возвращает значение True, Web-браузер передаст результаты формы по URL-адресу, указанному в атрибуте method дескриптора <form>. В противном случае, т.е. если JavaScript-сценарий возвращает False, Web-браузер вернется к вводу данных формы и поместит курсор на элемент, для которого в сценарии вызывался метод focus().