Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


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

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


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

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх