• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Валидация формы на jQuery

Валидация формы на 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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх