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


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Проверка формы</title>
</head>
<body>           
<form method="POST" name="contact">
<table id="table_form" name="table_form">
	<tr><td class="left">First Name<span style="color:red;">*</span></td><td><input type="text" name="first_name"id="first_name"/></td></tr>		
	<tr><td>Last Name</td><td><input type="text" name="last_name"/></td></tr>
	<tr><td>Email<span style="color:red;">*</span></td><td><input type="text" name="email" id="email"/></td></tr>
	<tr><td>Phone</td><td><input type="text" name="phone"/></td></tr>
	<tr><td>Message<span style="color:red;">*</span></td><td><textarea name="message" id="message" colspan=35 rowspan=40> </textarea></td></tr>				
	<tr><td></td><td><input type="image" src="/wp-content/themes/political/img/send.jpg" class="img_button" /></td></tr>
</table>			
</form>
</body>
</html>

Теперь собственно создадим небольшой скрипт на JS, где мы получаем значения обязательных к заполнению полей и делаем их проверку. Если поля пустые или заполнены некорректно, то выводится соответствующее сообщение и данные не отправляются на сервер.

Сначала подключаем jQuery, например, так:

1
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Далее сам скрипт:

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
<script>
$(document).ready(function() {
   $(".img_button").click(function(){
   		ver=true;
		first_name=$("#first_name").val();
		var p=/^[a-z0-9_\.\-]{3,35}$/i;
		if(!p.test(first_name)){
			 message_a="Incorrect First Name";
			 ver=false;
 
		}
		   email=$("#email").val();
		   var p=/^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
		if(!p.test(email)){
			message_a="The email is incorrect!";
			ver=false;
		}
 
		message=$("#message").val();
		var p=/^[a-z0-9_\.\-]{30,250}$/i;
               if(!p.test(message)){
			message_a="The message is incorrect or empty!";
			ver=false;
		}
		if(ver){
			return true;
		}else{
		    alert(message_a);
			return false;
		}		   
   });
});
 
</script>

Если необходимо проверить поле с «обычным» именем пользователя, где разрешена кириллица и латиница (а также пробелы, числа и тире), то возможна следующая проверка:

1
2
3
4
5
name=$("#username").val();
var p=/^[а-яА-ЯёЁa-zA-Z0-9 \-]{5,35}$/i;
if(!p.test(name)){
     alert("error");
}

Обратите внимание, что проверка полей осуществляется с помощью регулярных выражений, в которых заданы правила, «как именно должны выглядеть пользовательские данные». Помните, что проверка данных на стороне браузера не избавляет вас от необходимости проверять данные на стороне сервера.





Другие посты

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

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