Проверка данных HTML-формы с помощью JavaScript

Проверка данных HTML-формы с помощью JavaScript может уменьшить количество загрузок, кликов мышью и движений, а соответственно и время затрачиваемое пользователем сайта на предоставление каких-либо данных. Но сразу скажу, что проверка данных с помощью JavaScript должна делаться только для упрощения использования сайта, и проверять данные HTML-формы обязательно нужно на сервере, так как проверку на JavaScript можно легко обойти.
Для начала посмотрим, как можно получить доступ к форме HTML-документа. На одной странице может быть несколько HTML-форм, и в JavaScript получить доступ к какой-либо форме можно с помощью массива document.forms, который и содержит все формы HTML-документа. Так получить объект формы можно по его номеру n на странице
Код
obj_form=document.forms[n];

Узнать общее количество форм на странице можно с помощью свойства length
Код
num_forms=document.forms.length;

Получить объект формы можно также и с помощью его имени, заданного атрибутом name в теге <form>, и используя конструкцию document.forms.nameForm или document.forms["nameForm"]. Например
Код
<form name="dataGuest">
...
</form>
...
<script type="text/javascript">
obj_form=document.forms.dataGuest;
/*
//или
obj_form=document.forms["dataGuest"];
*/
</script>

Также можно получить доступ к форме, используя идентификатор id в теге <form> следующим образом
Код
<form id="dataGuestId">
...
</form>
<script type="text/javascript">
obj_form=document.getElementById("dataGuestId");
</script>

Форма отправляется браузером при клике мышью по кнопке "Отправить" (<input type="submit" value="Отправить">) или при нажатии клавиши Enter в текстовом поле, созданным с помощью тега INPUT. Перед отправкой формы нам нужно проверить значения, содержащиеся в полях формы, а затем либо прервать процесс отправки, с выводом сообщения пользователю, если данные введены не должным образом, либо продолжить отправку, если данные заполнены пользователем корректно. Перехватить отправку формы при клике мышью по кнопке "Отправить" можно с помощью обработчика событий onClick в теге INPUT. Если обработчику вернуть значение false с помощью оператора return
Код
<input type="submit" onClick="return(false);" value="Отправить">

то форма отправлена не будет. Но при перехвате отправки формы по щелчку на кнопке "Отправить", мы не перехватим отправку формы при нажатии клавиши Enter в текстовом поле. Перехватить отправку формы в любом случае можно используя, обработчик события onSubmit в теге <form>, который также отменит отправку формы, если ему с помощью оператора return вернуть значение false. Для проверки данных определим функцию в обработчике событий onSubmit тега <form>, а отправить форму можно методом submit(), который есть у каждого объекта формы, следующим образом
Код
obj_form=document.forms.dataGuest;
obj_form.submit();

Доступ к элементам формы, создаваемым с помощью тегов INPUT, SELECT, TEXTAREA можно получить несколькими способами. Можно задать каждому тегу свой идентификатор id, и по нему определять объект элемента формы. Можно элементу формы задать имя с помощью атрибута name, и определить объект элемента как свойство объекта формы. Например
Код
<form name="dataGuest">
...
<input type="text" name="pole1">
</form>
<script type="text/javascript">
obj_form=document.forms.dataGuest;
obj_pole1=obj_form.pole1;
</script>

Так же у объекта формы есть массив elements (obj_form.elements), который содержит все элементы данной формы. Узнать общее количество элементов формы можно, используя свойство length (obj_form.elements.length). Получить объект элемента формы можно по его номеру n в форме, например
Код
obj_element=obj_form.elements[n];

Для примера осуществим проверку данных формы гостевой книги, которая будет иметь поля "Имя", "E-mail", "Сайт" и "Сообщение". Причем поля "Имя" и "Сообщение" обязательны для заполнения. И поэтому, если они не заполнены, выводим сообщение об ошибке пользователю и прерываем отправление формы. Также введем фильтр на длину сообщения, например, длина сообщения должна быть не менее 10 символов. Если длина сообщения будет менее 10 символов, то выводим пользователю сообщение о данной ошибке и прерываем отправку формы.
Код
<form name="dataGuest" onSubmit="provDataGuest(); return(false);" action="newmessage.php" method="post">
<table><tr><td>Имя</td><td><input type="text" name="name_user" value=""></td></tr>
<tr><td>E-mail</td><td><input type="text" name="email_user" value=""></td></tr>
<tr><td>Сайт</td><td><input type="text" name="site_user" value=""></td></tr>
<tr><td>Сообщение</td><td><textarea name="message_user"></textarea></td></tr>
<tr><td> </td><td><input type="submit" value="Отправить" name="submit_user"></td></tr></table>
</form>

Форма написана, осталось написать функцию provDataGuest(), которая будет проверять данные введенные в поля. Значение текстового поля (то есть введенный текст), можно найти в свойстве value объекта элемента формы.
Код
<script type="text/javascript">
function provDataGuest()
{
obj_form=document.forms.dataGuest;
obj_pole_name_user=obj_form.name_user;
obj_pole_message_user=obj_form.message_user;
if (obj_pole_name_user.value=="")
{
/*
если в поле нет текста, то выводим сообщение об этом пользователю
*/
alert ("Напишите свое имя!");
return;
}
if (obj_pole_message_user.value=="")
{
alert ("Напишите сообщение!");
return;
}
textMessage=obj_pole_message_user.value;
if (textMessage.length<10)
{
alert ("Длина сообщения должна быть не менее 10 символов");
return;
}
//все обязательные данные введены, поэтому отправляем форму
obj_form.submit();
}
</script>

Вот мы и написали простенький скрипт обработки данных формы, который придаст сайту небольшой уровень интерактивности. Используя приведенные основы, можно осуществлять различные проверки данных, например, на допустимые символы, на максимальное и минимальное количество символов, на правильность введенных адресов сайта и электронной почты и т.д.
Опубликовано 26 сентября 2008 г.
Комментарии к публикации
Всего комментариев: 10
прохожий: Артур | 09.07.2009, 02:22 #
Спасибо большое, очень помогло мне, как для начинающего! :)
прохожий: Дмитрий | 24.09.2009, 17:50 #
Супер! Лучшего описания в сети не найти!
прохожий: Чингиз | 05.04.2010, 10:13 #
Класс, спасибо очень помогло, как раз то что и я искал
прохожий: Влад | 04.05.2010, 03:47 #
Добрый день! Столкнулся с такой проблемой, причем с любым скриптом, закинул все файлы голосования на хост, когда на сайте уже захожу на страницу голосования и жму отправить, мне просто обновляется страница и все! что делать, что куда нужно вставить напишите пожалуйста! заранее спасибо!
Суперадмин: | 05.05.2010, 06:13 #
В этой статье рассказывается, как сделать проверку данных на javascript введенных пользователем в html-форму. Разместите два последних приведенных кода на html-странице и убедитесь что в браузере включен javascript. В этом примере данные на стороне сервера не обрабатываются.
прохожий: ce | 19.12.2017, 23:00 #
E-mail: написать сообщение
сайт: ss
как сделать проверку тогда в php форме? чтобы далее шла работа с базой данных
прохожий: Олег | 05.06.2010, 21:16 #
сайт: all4sites.ru
Отличная статья! Очень помогла. Спасибо автору!
прохожий: Жека | 29.06.2010, 23:03 #
сайт: desk-tops.ru
Класс! Все понятно и подробно расписано. Спасибо!
прохожий: Константин | 23.12.2010, 04:57 #
сайт: rulevoi.net
Спасибо за статью. А можете написать, как вывести текст предупреждения в html (текст), например, красным шрифтом рядом с полем ввода написать "Введите имя!!" и т.п.???
Суперадмин: | 24.12.2010, 07:31 #
А что тут сложного? Напишите рядом с полем нужный текст и с помощью CSS сделайте чтобы был текст красным.
Вход в аккаунт
Новости сайта