Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Валидация формы на jQuery
 |
 |
Исходники |
Пример |
В сегодняшней статье мы будем с Вами создавать скрипт валидации формы с помощью javascript-библиотеки jQuery.
Валидация - это попросту говоря, проверка введенных пользователем данных в форму на соответствие тем или иным параметрам.
Допустим, если у нас есть поле, куда должен быть введен email, мы должны обязательно проверить, чтобы пользователь ввел именно email-адрес, а не набор каких-то непонятных символов.
В данном уроке будет рассмотрен jQuery-скрипт для валидации формы обратной связи и отправкой данных с помощью Ajax-запроса.
Создадим HTML структуру нашей формы:
<div id="feedback-box">
<h2>Связь со мной</h2>
<form id="feedback-form">
<div class="input-bloc w1">
<label for="name">Имя:</label>
<input type="text" size="25" name="name" id="name" />
<div class="error-box"></div> <!-- Контейнер для ошибок -->
</div>
<div class="input-bloc w1">
<label for="email">Email:</label>
<input type="text" size="25" name="email" id="email" />
<div class="error-box"></div>
</div>
<div class="input-bloc msg">
<label for="message">Сообщение:</label>
<textarea name="message" cols="50" rows="10" id="message"></textarea>
<div class="error-box"></div>
</div>
<div><input type="submit" id="send" value="Отправить письмо" /></div>
</form>
</div>
Далее пропишем CSS стили для нашей формы:
*{ margin:0; padding: 0;} //убираем все отступы по умолчанию
body{ font: 13px Arial, sans-serif; }
#feedback-box{
background: url(http://subtlepatterns.com/patterns/paper_fibers.png);
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#feedback-box h2{
text-align: center;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
font-size: 23px;
color: #414141;
margin: 0;
}
#feedback-form{
padding: 20px 25px;
border-top: 1px solid #fff;
}
#feedback-form input[type="text"], #feedback-form textarea{
padding: 7px 10px;
outline: none;
border: 1px solid #ddd;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#feedback-form textarea{
resize: none;
overflow-y: auto;
width: 330px;
}
#feedback-form input[type="text"]{
margin-left: 10px;
}
#feedback-form input[type="text"]:focus, #feedback-form textarea:focus{
border: 1px solid #ccc;
}
#feedback-form #send{
padding: 5px 20px;
}
#feedback-form .input-bloc{
margin-bottom: 12px;
}
#feedback-form .w1 label{
display: inline-block;
width: 40px;
}
#feedback-form .msg label{
display: inline-block;
margin-bottom: 6px;
}
.error-box{
color: red;
font-size: 12px;
}
Теперь наша форма выглядит так:
После того, как форма готова, приступаем к написанию кода для валидации:
Логика работы будет следующая: когда пользователь убирает курсор с поля (поле теряет фокус), оно проходит определенную проверку.
Если все введено согласно параметрам верно, тогда полю присваивается класс "not_error". Иначе, если поле не прошло проверку на правильность введенных данных, оно получает класс "error".
Присваивание классов - также важный момент в реализации данного подхода валидации. Именно они позволят нам проверить, будет ли доступна функции отправки формы или нет при нажатии на кнопку ее отправки.
<script type="text/javascript">
$(document).ready(function(){
// Устанавливаем обработчик потери фокуса для всех полей ввода текста
$('input#name, input#email, textarea#message').unbind().blur( function(){
// Для удобства записываем обращения к атрибуту и значению каждого поля в переменные
var id = $(this).attr('id');
var val = $(this).val();
// После того, как поле потеряло фокус, перебираем значения id, совпадающие с id данного поля
switch(id)
{
// Проверка поля "Имя"
case 'name':
var rv_name = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение
// Eсли длина имени больше 2 символов, оно не пустое и удовлетворяет рег. выражению,
// то добавляем этому полю класс .not_error,
// и ниже в контейнер для ошибок выводим слово " Принято", т.е. валидация для этого поля пройдена успешно
if(val.length > 2 && val != '' && rv_name.test(val))
{
$(this).addClass('not_error');
$(this).next('.error-box').text('Принято')
.css('color','green')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
// Иначе, мы удаляем класс not-error и заменяем его на класс error, говоря о том что поле содержит ошибку валидации,
// и ниже в наш контейнер выводим сообщение об ошибке и параметры для верной валидации
else
{
$(this).removeClass('not_error').addClass('error');
$(this).next('.error-box').html('поле "Имя" обязательно для заполнения<br>, длина имени должна составлять не менее 2 символов<br>, поле должно содержать только русские или латинские буквы')
.css('color','red')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
break;
// Проверка email
case 'email':
var rv_email = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(val != '' && rv_email.test(val))
{
$(this).addClass('not_error');
$(this).next('.error-box').text('Принято')
.css('color','green')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
else
{
$(this).removeClass('not_error').addClass('error');
$(this).next('.error-box').html('поле "Email" обязательно для заполнения<br>, поле должно содержать правильный email-адрес<br>
.css('color','red')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
break;
// Проверка поля "Сообщение"
case 'message':
if(val != '' && val.length < 5000)
{
$(this).addClass('not_error');
$(this).next('.error-box').text('Принято').
.css('color','green')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
else
{
$(this).removeClass('not_error').addClass('error');
$(this).next('.error-box').html('поле "Текст письма" обязательно для заполнения')
.css('color','red')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
break;
} // end switch(...)
}); // end blur()
// Теперь отправим наше письмо с помощью AJAX
$('form#feedback-form').submit(function(e){
// Запрещаем стандартное поведение для кнопки submit
e.preventDefault();
// После того, как мы нажали кнопку "Отправить", делаем проверку,
// если кол-во полей с классом .not_error равно 3 (так как у нас всего 3 поля), то есть все поля заполнены верно,
// выполняем наш Ajax сценарий и отправляем письмо адресату
if($('.not_error').length == 3)
{
// Eще одним моментом является то, что в качестве указания данных для передачи обработчику send.php, мы обращаемся $(this) к нашей форме,
// и вызываем метод .serialize().
// Это очень удобно, т.к. он сразу возвращает сгенерированную строку с именами и значениями выбранных элементов формы.
$.ajax({
url: 'send.php',
type: 'post',
data: $(this).serialize(),
beforeSend: function(xhr, textStatus){
$('form#feedback-form :input').attr('disabled','disabled');
},
success: function(response){
$('form#feedback-form :input').removeAttr('disabled');
$('form#feedback-form :text, textarea').val('').removeClass().next('.error-box').text('');
alert(response);
}
}); // end ajax({...})
}
// Иначе, если количество полей с данным классом не равно значению 3, мы возвращаем false,
// останавливая отправку сообщения в невалидной форме
else
{
return false;
}
}); // end submit()
}); // end script
</script>
В самом начале задаем условие, что когда DOM загружена, мы включаем скрипт в работу.
$('input#name, input#email, textarea#message').unbind().blur( function(){ ... });
В набор объектов на проверку мы включаем все необходимые поля нашей формы. В качестве уникальных значений каждому из объектов формы задаем свой идентификатор. Устанавливаем событие потери фокуса blur на каждый объект из набора.
Когда поле потеряло фокус, сработал метод blur, конструкцией switch-case поверяется, какое именно поле это было. Для определения мы как раз и будем использовать те самые идентификаторы полей.
var id = $(this).attr('id');
var val = $(this).val();
switch(id) {
case 'name'
....
break;
}
Для удобства в переменные id и val мы поместили значение идентификатора поля, которое потеряло фокус а так же его значение.
В блоке case мы уже осуществляем проверку текущего поля на те параметры, которые нам необходимы. К примеру, в моем примере я проверяю поле имени регулярным выражением и также на длину введенного в него значения.
Если введенное пользователем значение проходит проверку, тогда я добавляю полю нужный класс (о них я говорил выше) и визуализирую его нужными мне эффектами - тут работает уже только Ваша фантазия.
Такая же схема работы со всеми объектами формы.
Пользователь заполнил все поля, допустим верно, и нажимает на кнопку отправки данной формы:
$('form#feedback-form').submit(function(e){
// Запрещаем стандартное поведение для кнопки submit
e.preventDefault();
if($('.not_error').length == 3)
{
// Ajax запрос на отправку формы
}
Сначала мы запрещаем стандартное поведение при нажатии на кнопку Submit. И самое главное - в блоке if мы проверяем количество элементов с классом not_error.
Напомню, данный класс мы добавляли ко всем полям без ошибок. Так как количество проверяемых объектов нашей формы было всего 3, то мы проверяем количество элементов с данным классом. Если условие срабатывает, тогда мы просто составляем AJAX-запрос на отправку данных формы в PHP-обработчик.
Если количество полей с данным классом не будет равно необходимому нам количеству, форма не отправится. Т.е. чтобы отправить форму, поля в любом случае должны получить фокус и получить правильное значение. Иначе скрипт возвратит FALSE (ложь) при отправке.
Обработчик send.php
$email = $_POST['email']; $name = $_POST['name']; $message = $_POST['message']; $to = "admin@mail.ru"; $subject = "От посетителя сайта"; $text = "Написал(а): $name\n Контактный email - $email\n\n Текст письма: $message\n"; $header.= "Content-type: text/html; charset=utf-8\r\n"; $header .= "MIME-Version: 1.0\r\n"; $sending = mail($to, $subject, $text, $headers); if($sending) echo "Письмо отправлено. Ответа не ждите :)";
На этом все. Надеюсь, данный материал будет для вас хорошей основой для собственных решений.
Материал подготовил Сергей Губарев специально для сайта CodeHarmony.ru
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
