Июль
Проверка формы jquery
В веб приложениях для общения с посетителями сайта используются веб формы. Это может быть форма для голосования, добавление сообщений на форум или комментариев в блог, а так же форма для отправки почты. Данные из формы следует проверять, или по умному проводить валидацию. В этом уроке я расскажу как провести валидацию формы jquery.
Наша форма может быть заполнена не полностью или не верно или вообще не заполнена. Отправляемые данные следует проверять на стороне сервера во избежании sql иньекций и других вариантов взлома, но так же для снижения нагрузки на сервер валидацию данных можно проводить и на стороне клиента. Если с формой что то не так данные на сервер не отправляются, а пользователь получает сообщение об ошибке. Соответственно так как сервер не обрабатывает не правильно заполненную форму, то и нагрузка на него становится меньше. Так как проверка будет проходить на стороне клиента, то для валидации мы будем использовать клиентский язык программирования javascript и для упрощения синтаксиса будет проводиться валидация формы jquery.
В самой форме мы будем проверять поле с email на соответствие емайл адресу, поля имя и фамилия на заполнение (что бы были не пустые), а так же что бы поля с пасвордом были заполнены и одинаковы. При неправильном заполнении должно выводиться сообщение об ошибке, а не валидное поле должно обрамляться красной рамкой.
Html и css код нашей формы.
<form id='join' class="join" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<h2>Регистрация</h2>
<div class="string">
<label for="email">Адрес эл. почты</label>
<input type="text" size="25" id="email" value="" name="email"/>
</div>
<div class="string">
<label for="firstname">Имя</label>
<input type="text" size="25" id="firstname" value="" name="firstname"/>
</div>
<div class="string">
<label for="lastname">Фамилия</label>
<input type="text" size="25" id="lastname" value="" name="lastname" />
</div>
<div class="string">
<label for="pass">Придумайте пароль</label>
<input type="password" size="25" id="pass" value="" name="pass"/>
</div>
<div class="string">
<label for="passtwo">Повторите пароль</label>
<input type="password" size="25" id="passtwo" value="" name=""/>
</div>
<input type="submit" name="" value="Регистрация" class="submit"/>
</form>
.join{
margin: 0 auto;
margin-top: 35px;
width: 300px;
background-color: #f7f7f7;
border: 1px solid #64B8F0;
padding: 25px;
z-index: 1000;
}
.join h2{
margin: 0;
text-align: center;
margin-bottom: 10px;
}
label{
display: block;
padding-bottom: 5px;
}
input{
margin-bottom: 10px;
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
}
.string{
padding-left: 50px;
}
.error{
color: #DF4831;
}
.submit {
/*код кнопки*/
}
.submit:hover{
/*код кнопки*/
}
C js кодом разберёмся поподробнее. Перед отправкой проводится валидация полей формы jquery на соответствие шаблону регулярного выражения, а для полей пассворд сравниваем их между собой. Если данные в проверяемых полях не валидны, то в переменную errCount плюсуется единица. Если переменная errCount больше 0, то есть содержит ошибку форма не отправляется return false. Вот такая вот простая валидация формы jquery. Ну и с выводом сообщений об ошибках и красоты с выделением рамки красным цветом описывать не буду.
$(document).ready(function(){
$('.submit').click(function(){
var errCount=0;/*устанавливаем счётчик ошибок*/
$('.errorEmail').remove();/*удаляем сообщение о ошибке если такое было*/
$('#email').css({'border-color':'#aaa'});/*возвращаем не красный цвет границе*/
var pole1=$('#email').val();/*получаем значение введённое в поле*/
var pole1RegExp=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;/*шаблон регулярного выражения для проверки*/
if(!pole1RegExp.test(pole1)){/*проверка через ф-ю .test() соотнош рег выражения и данных в форме*/
/*если данные не совпали делаем цвет рамки красным, выводим сообщение о ошибке, к счётчику ошибок плюсуем 1*/
$('#email').css({'border-color':'#DF4831'}).before('<div class="errorEmail" style="color: #e82517" >
Вы не ввели email или он не правильный</div>');
errCount++;
}
$('.errorFirstname').remove();
$('#firstname').css({'border-color':'#aaa'});
var pole2=$('#firstname').val();
var pole2RegExp=/\S/;
if(!pole2RegExp.test(pole2)){
errCount++;
$('#firstname').css({'border-color':'#DF4831'}).before('<div class="errorFirstname" style="color: #e82517">
Вы не ввели имя</div>');
}
$('.errorLastname').remove();
$('#lastname').css({'border-color':'#aaa'});
var pole3=$('#lastname').val();
var pole3RegExp=/\S/;
if(!pole3RegExp.test(pole3)){
errCount++;
$('#lastname').css({'border-color':'#DF4831'}).before('<div class="errorLastname" style="color: #e82517">
Вы не ввели фамилию</div>');
}
$('.errorPass').remove();
$('#pass').css({'border-color':'#aaa'});
var pole4=$('#pass').val();
var pole4RegExp=/\S/;
if(!pole4RegExp.test(pole4)){
errCount++;
$('#pass').css({'border-color':'#DF4831'}).before('<div class="errorPass" style="color: #e82517">
Вы не ввели пароль</div>');
}
$('.errorPasstwo').remove();
$('#passtwo').css({'border-color':'#aaa'});
var pole5=$('#passtwo').val();
if(pole5!==pole4){
errCount++;
$('#passtwo').css({'border-color':'#DF4831'}).before('<div class="errorPasstwo" style="color: #e82517">
Не правильно повторили пароль</div>');
}
/*если счётчик ошибок больше 0 то форму не отправляем return false*/
if(errCount>0){
return false;
}
});
});
Ну и последним штрихом у нас будет для проверки работы скрипта получение данных на сервер и вывод их нам в браузер. Для этого используем скрипт на php.
Поместим данный кусок кода до доктайпа (<!doctype html>). Теперь нашему файлу надо дать расширение php а не html.
<?php
$email="" ;
$firstname="";
$lastname="";
$pass="";
// Проверяем, была ли корректным образом отправлена форма
if(
isset($_POST['email']) && !empty($_POST['email']) &&
isset($_POST['firstname']) && !empty($_POST['firstname']) &&
isset($_POST['lastname']) && !empty($_POST['lastname'])&&
isset($_POST['pass']) && !empty($_POST['pass'])
){
// Фильтруем полученные данные
$email = stripslashes(trim(htmlspecialchars($_POST['email'],ENT_QUOTES)));
$firstname = stripslashes(trim(htmlspecialchars($_POST['firstname'],ENT_QUOTES)));
$lastname = stripslashes(trim(htmlspecialchars($_POST['lastname'],ENT_QUOTES)));
$pass = stripslashes(trim(htmlspecialchars($_POST['pass'],ENT_QUOTES)));
}
?>
А эту php вставку поставим после самой формы, в ней мы будем выводить наши введённые данные.
<?php
echo "Вы ввели емайл: ".$email."<br>" ;
echo "Вы ввели имя: ".$firstname."<br>";
echo "Вы ввели фамилию: ".$lastname."<br>";
echo "Вы ввели пароль: ".$pass."<br>";
?>
Вот так вот была проведена валидация формы jquery.