Проверка заполнения полей формы на JavaScript.

Опубликовано: 23 января 2012 Автор: admin

Когда ваши посетители заполнили форму обратной связи и нажали на кнопку «Отправить», то прежде чем обрабатывать введенные данные php-скриптом, будет очень удобной проверка заполнения полей формы с помощью JavaScript, которая может быть проделана тут же, на той же самой странице без перезагрузки. Здесь я расскажу, как это можно сделать.

Для начала сформируем форму.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Проверка формы</title>
</head>
<body>           
<form name="zayavka_form" method="post" action="/verify.php" onsubmit="return validate_form ( );">
<p>Ваше имя: <font color="red">*</font></p>
<input name="nick" type="text" size="30">
<p>Компания:<font color="red">*</font></p>
<input name="company" type="text" size="30">
<p>E-mail:<font color="red">*</font></p> 
<input name="mail" type="text" size="30">
<p>Телефон:<font color="red">*</font></p> 
 
<input name="tel" type="text" size="30">  
<p>Комментарий к заявке:*</p><font color="red"></font><br>   
<textarea name="comment" cols="22" rows="3"></textarea>
<br>
<input type="submit" value="Отправить">
</form>
</body>
</html>

Как видно из кода в нем содержится ссылка на функцию valid_form(), обрабатывающая форму при нажатии кнопки «Отправить данные». Если проверка прошла успешна, то происходит переход к скрипту run.php, где собственно и происходит окончательная обработка данных пользователя и выполнение других действий, например, отправка информации на email владельца сайта.

Код функции valid_form() на JavaScript можно разместить в начале страницы между тегами <head> и </head>, либо же в отдельном файле с расширением .js (в последнем случае не забудьте указать к нему путь в начале кода страницы).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript">
<!--
function valid_form ( )
{
	valid = true;
	message="Заполните, пожалуйста, поля:\n";
        if ( document.zayavka_form.nick.value == "" )
        {
                message+="Ваше имя\n";			
                valid = false;
        }
		if ( document.zayavka_form.company.value == "" )
        {
                message+="Название компании\n";			
                valid = false;
        }
		if ( document.zayavka_form.mail.value == "" )
        {
                message+="e-mail\n";			
                valid = false;
        }
		if ( document.zayavka_form.tel.value == "" )
        {
                message+="Телефон\n";			
                valid = false;
        }
		if ( document.zayavka_form.comment.value == "" )
        {
                message+="Комментарий к заявке\n";			
                valid = false;
        }
		if (valid == false )
        {
                alert(message);
        }
        return valid;
}
//-->
</script>

Этот сценарий выполняет проверку всех полей и, если какое-то обязательное поле не заполнено, то он выводит всплывающее сообщение (модальное окно), в котором указано, какую информацию пользователь не ввел.

Если же все ок, то происходит отправка данных из формы скрипту run.php. При этом не происходит перезагрузки страницы, а уже введенные данные пользователем сохраняются в полях, что весьма удобно для посетителя.

Категория: JavaScript для сайта

Оставить комментарий