Когда ваши посетители заполнили форму обратной связи и нажали на кнопку «Отправить», то прежде чем обрабатывать введенные данные php-скриптом, будет очень удобной проверка заполнения полей формы с помощью JavaScript (jQuery), которая может быть проделана тут же, на той же самой странице без перезагрузки. Здесь я расскажу, как это можно сделать.
Для начала сформируем форму.
<!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, например, так:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
Далее сам скрипт:
<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>
Если необходимо проверить поле с «обычным» именем пользователя, где разрешена кириллица и латиница (а также пробелы, числа и тире), то возможна следующая проверка:
name=$("#username").val();
var p=/^[а-яА-ЯёЁa-zA-Z0-9 \-]{5,35}$/i;
if(!p.test(name)){
alert("error");
}
Обратите внимание, что проверка полей осуществляется с помощью регулярных выражений, в которых заданы правила, «как именно должны выглядеть пользовательские данные». Помните, что проверка данных на стороне браузера не избавляет вас от необходимости проверять данные на стороне сервера.