Здравствуйте, дорогие читатели!

Сегодня я расскажу и покажу как сделать полную проверку полей формы на jQuery. Под словом «полная» подразумеваются поля для телефона, email, текстовые поля и чекбоксы. Для селектов и радиокнопок, проверки не нужны, потому что у них изначально есть уже один отмеченный элемент. К слову я уже писал пару статей про проверку полей формы: это и простая проверка полей формы и проверка поля телефона. В этой статье проверка формы будет слегка расширена и модифицирована в лучшую сторону, осуществляться она будет моим новым плагином formcheck.js — чтобы увидеть его в действии кликаем по кнопке «Демо» ниже. Можете скачать исходники для свободного использования в своих проектах!

Formcheck - jQuery плагин для проверки полей форм

Разметка формы

Начнем с того что подготовим каркас формы, с которой нам предстоит работать:

<form action="#" method="post" class="form_check form_style">
  <p class="rline">
    <label for="user_name">Имя пользователя:</label>
    <input type="text" class="rfield" id="user_name" />
  </p>
  <p class="rline">
    <label for="user_family">Фамилия пользователя</label>
    <input type="text" class="rfield" id="user_family" />
  </p>
  <p class="rline">
    <label for="user_mail">Email пользователя</label>
    <input type="text" class="rfield mailfield" id="user_mail" />
  </p>
  <p class="rline">
    <label for="user_phone">Телефон пользователя:</label>
    <input type="text" class="rfield phonefield" id="user_phone" />
  </p>
  <p class="rline">
    <label for="user_work">Профессия пользователя:</label>
    <input type="text" class="rfield" id="user_work" />
  </p>
  <p class="rline rcheck">
    <input type="checkbox" class="rfield" id="check_1" />
    <label for="check_1">Я прочитал условия лицензионного соглашения</label>
  </p>
  <p class="rline rcheck">
    <input type="checkbox" class="rfield" id="check_2" />
    <label for="check_2">Я согласен на все!</label>
  </p>
  <button type="submit" class="btnsubmit">Отправить данные</button>
</form>

Я бы сказал, что все прозрачно, но чуток ясности все же внесу:

  1. У формы, которую мы собираемся проверять должен быть класс form_check, стили к нему лучше не привязывать, потому что форм мы можем проврять несколько и у каждой может быть своя стилизация
  2. Для стилизации элементов, форме я добавил еще один класс form_style
  3. Каждому инпуту который нужно проверить добавляем класс rfield
  4. Родителю поля (в данном случае это абзац p), которое мы будем проверять, нужно добавить класс rline
  5. Родителю поля чекбоксов, нужно добавить класс rline rcheck
  6. Кнопке отправки формы ставим класс btnsubmit

Помимо всех ясностей, что я перечислил, перед закрывающим тегом body подключаем:

  • библиотеку jQuery, без нее никуда,
  • плагин is_mobile, для проверки что это не мобильное устройство, потому что они с jQuery туго дружат
  • плагин Masked Input, для маски поля телефона
  • и наш скрипт, он же мини плагин formcheck.js

Подключаем вот так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="is.mobile.js"></script>
<script src="jquery.maskedinput.min.js"></script>
<script src="formcheck.js"></script>

Добавим стилей элементам формы

Стилить будем в плоском(flat) дизайне, без лишних заморочек:

.form_style p {
  margin-bottom: 25px;
  position: relative;
}
.form_style .rcheck {
  margin-bottom: 10px;
}
.form_style p label {
  font-size: 13px;
  font-weight: bold;
  color: #444444;
  display: block;
  cursor: pointer;
}
.form_style .rcheck label {
  font-size: 13px;
  font-weight: normal;
  color: #444444;
  display: inline;
  vertical-align: top;
}
.form_style input[type="text"] {
  display: block;
  border: 2px solid #cfcfcf;
  font-size: 14px;
  color: #444444;
  padding: 7px 7px 8px;
  width: 250px;
}
.form_style input[type="checkbox"] {
  display: inline-block;
  border: 1px solid #cfcfcf;
  width: 14px;
  margin: 4px 4px 0 0;
  vertical-align: top;
}
.form_style input:focus {
  outline: none;
  border-color: #07a6e6;
}
.form_style .btnsubmit {
  border: none;
  width: 180px;
  text-align: center;
  background: #07a6e6;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  height: 35px;
  line-height: 28px;
  padding: 0;
}
.form_style input.rf_error {
  border-color: #d8512d;
}
.form_style .rfield_error {
  display: block;
  padding: 0px 10px;
  background-color: #d8512d;
  color: #fff;
  font-size: 12px;
  z-index: 1;
  position: absolute;
  top: 25px;
  left: auto;
  right: 32px;
  visibility: hidden;
}
.form_style .rcheck .rfield_error {
  top: 0px;
  left: 22px;
  right: auto;
}
.form_style .btnsubmit:hover {
  background: #009ac2;
}
.form_style .btnsubmit:active {
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
  outline: none;
}
.form_style .btnsubmit:focus {
  outline: none;
}
.form_style .btnsubmit.disabled,
.form_style .btnsubmit.disabled:hover {
  background: #afdde6;
  cursor: default;
}

Пару слов о подсветке некорректных полей:

  • При неправильно заполненном поле или если оно пустое, ему добавляется класс rf_error — у меня это красная рамка, но Вы можете застилить ее по своему
  • Также в этот момент становиться видимой подсказка что поле не заполнено, для стилизации используем класс rfield_error, свою я расположил в правом верхнем углу текстовых полей, а для чекбоксов — справа от чекбокса (наложил на label)

Как видите со стилями особых заморочек нет)))

Самое интересное — мой плагин FormCheck.js

Я приведу полный листинг:

(function( $ ){
	
  //// ---> Check issue element
	jQuery.fn.exists = function() {
	   return jQuery(this).length;
	}
  
  $(function() {
    
    if(!is_mobile()){
      
      if( $('.phonefield').exists()){
        $('.phonefield').mask('38 (999) 999-99-99');
      }
      
      if( $('.form_check').exists()){
      
        $('.form_check').each(function(){
        
          var form = $(this),
              btn = form.find('.btnsubmit');
        
          form.find('.rfield').addClass('empty_field').parents('.rline').append('<span class="rfield_error">Заполните это поле</span>');
          btn.addClass('disabled');
          
          // Функция проверки полей формы      
          function checkInput(){
            
            form.find('.rfield').each(function(){
              
              if($(this).hasClass('phonefield')){
                var pmc = $(this);
                if ( (pmc.val().indexOf("_") != -1) || pmc.val() == '' ) {
                  pmc.addClass('empty_field');
                } else {
                  pmc.removeClass('empty_field');
                }
              } else if($(this).hasClass('mailfield')) {
                var mailfield = $(this);
                var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
                if(pattern.test(mailfield.val())){
                  mailfield.removeClass('empty_field');
                } else {
                  mailfield.addClass('empty_field');
                }
              } else if($(this).is(':checkbox')) {
                var checkBox = $(this);
                if(checkBox.is(':checked')){
                  checkBox.removeClass('empty_field')
                } else {
                  checkBox.addClass('empty_field')
                }
              } else if($(this).val() != '') {
                $(this).removeClass('empty_field');
              } else {
                $(this).addClass('empty_field');
              }

            });
          }
          
          // Функция подсветки незаполненных полей
          function lightEmpty(){
            form.find('.empty_field').addClass('rf_error');
            form.find('.empty_field').parents('.rline').find('.rfield_error').css({'visibility':'visible'});
            setTimeout(function(){
              form.find('.empty_field').removeClass('rf_error');
              form.find('.empty_field').parents('.rline').find('.rfield_error').css({'visibility':'hidden'});
            },2000);
          }
          
          //  Полсекундная проверка
          setInterval(function(){
            checkInput();
            var sizeEmpty = form.find('.empty_field').length;
            if(sizeEmpty > 0){
              if(btn.hasClass('disabled')){
                return false
              } else {
                btn.addClass('disabled')
              }
            } else {
              btn.removeClass('disabled')
            }
          },500);
          
          //  Клик по кнопке
          btn.click(function(){
            if($(this).hasClass('disabled')){
              lightEmpty();
              return false
            } else {
              form.submit();
            }
          });
          
        });
      
      }
    }
    
  });

})( jQuery );

Суть скрипта достаточно проста, если поля формы заполнены правильно, то претензий нет и форма отправляется, а если не правильно — появляется предупреждение и форма остается на месте. Добавлю что поле email проверяется по паттерну (наличие знака @ и минимум двух слов после него, через точку). Поле телефона проверяется по принципу отсутствия «нижнего подчеркивания». Чекбоксы проверяем по их включенности. Вот и все.

Заключение

Я поделился с Вами моим новым плагином formcheck.js для полной проверки полей формы, с помощью jQuery. Рад Вас баловать такими штучками, а Вы делитесь статьей в социальных сетях, и подписывайтесь на обновления, впереди много интересного! О всяких недочетах, пожеланиях и благодарностях, пишите в комментариях, помните можно попасть в «топ» и ссылка на Ваш сайт на главной странице блога howtomake, открытая для индексации, Вам гарантирована! Спасибо за внимание!

Добавить комментарий:


Комментарии
  1. Саша

    Спасибо, после долгой паузы такой подарок!

  2. JAH

    Саша, да пауза затянулась)) буду поправлять ситуацию

  3. Junk [Шишов Антон]

    Спасибо большое за сам скрипт, я же кроме простой проверки заполнения полей не могу написать.
    Надо учить регулярку.

  4. JAH

    Junk, на подходе улучшенная версия, с возможностью проверять селекты/радиокнопки. Хотелось бы еще и для «загрузки файлов» что-то путевое придумать

  5. Cache0

    Здравствуйте, вариант с блокировкой кнопки и без подсказок имхо не удобен, т.к. юзеру самому приходится поверять что же он не так ввел

    За пример Огромное спасибо!!!

  6. Ярослав

    Добрый день!! ну что когда там будет проверка с использованием option

  7. JAH

    Ярослав, вот листинг скрипта с проверкой селектов (сам скрипт слегка отличается от того что в статье, нету вывода сообщения, что нужно что-то ввести, вместо него обычная подсветка поля)

    (function( $ ){
    	
      //// ---> Check issue element
    	jQuery.fn.exists = function() {
    	   return jQuery(this).length;
    	}
      
    	$(function() {
        
        if(!is_mobile()){
          
          if( $('.phonefield').exists()){
            $('.phonefield').mask('+7 (999) 999-99-99');
          }
          
          if( $('.form_check').exists()){
          
            $('.form_check').each(function(){
            
              var form = $(this),
                  btn = form.find('.btnsubmit');
            
              form.find('.rfield').addClass('empty_field');
              btn.addClass('disabled');
              
              // Функция проверки полей формы      
              function checkInput(){
                
                form.find('.rfield').each(function(){
                  
                  if($(this).hasClass('phonefield')){
                  
                    var pmc = $(this);
                    if ( (pmc.val().indexOf("_") != -1) || pmc.val() == '' ) {
                      pmc.addClass('empty_field');
                    } else {
                      pmc.removeClass('empty_field');
                    }
                    
                  } else if($(this).hasClass('mailfield')) {
                  
                    var mailfield = $(this);
                    var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
                    if(pattern.test(mailfield.val())){
                      mailfield.removeClass('empty_field');
                    } else {
                      mailfield.addClass('empty_field');
                    }
                  
                  } else if($(this).is('select')) {
                    
                    var slct = $(this),
                        valSel = slct.find(':selected').text();
                    
                    if(valSel != ''){
                      slct.removeClass('empty_field');
                    } else {
                      slct.addClass('empty_field');
                    }
                  
                  } else if($(this).val() != '') {
                    
                    $(this).removeClass('empty_field');
                    
                  } else {
                    
                    $(this).addClass('empty_field');
                  }
    
                });
              }
              
              // Функция подсветки незаполненных полей
              function lightEmpty(){
                form.find('.empty_field').addClass('rf_error');
                setTimeout(function(){
                  form.find('.empty_field').removeClass('rf_error');
                },1500);
              }
    
              //  Полсекундная проверка
              setInterval(function(){
                checkInput();
                var sizeEmpty = form.find('.empty_field').length;
                if(sizeEmpty > 0){
                  if(btn.hasClass('disabled')){
                    return false
                  } else {
                    btn.addClass('disabled')
                  }
                } else {
                  btn.removeClass('disabled')
                }
              },500);
              
              //  Клик по кнопке
              btn.click(function(ev){
                if($(this).hasClass('disabled')){
                  lightEmpty();
                  ev.preventDefault();
                }  else {
                  form.submit();
                }
              });
    
            });
          
          }
        }
        
    	});
    
    })( jQuery );
  8. Дмитрий

    Владимир, спасибо за чудесный скрипт!!
    А можно ли ещё, помимо селектов, добавить поддержку проверки обязательных radio button?

  9. JAH

    Дмитрий, да можно я сечас работаю над улучшением скрипта и там будет возможность(по идее) проверять все что можно проверить + вывод кастомных ошибок для различных полей

  10. Geass

    Спасибо за скрипт, очень пригодился. Если вам интересно, в скрипте есть небольшая, но в тоже время, очень неприятная ошибка. Суть ошибки:
    В форме присутствует незаполненное поле. При нажатии на кнопку отправить появляется соответствующее сообщение, с ошибкой о незаполненном поле. Если быстро что-нибудь написать, в незаполненном поле, то сообщение с ошибкой не исчезнет. Вот отрывок кода, который призван исправит данную ошибку:

    // Функция подсветки незаполненных полей
    function lightEmpty(){
    form.find(‘.empty_field’).addClass(‘rf_error’).addClass(‘rf_trouble’);
    form.find(‘.rf_trouble’).parents(‘.rline’).find(‘.rfield_error’).css({‘visibility’:’visible’});
    setTimeout(function(){
    form.find(‘.rf_trouble’).removeClass(‘rf_error’);
    form.find(‘.rf_trouble’).parents(‘.rline’).find(‘.rfield_error’).css({‘visibility’:’hidden’});
    form.find(‘.rf_trouble’).removeClass(‘rf_trouble’);
    },2000);
    }

    За ошибки в исправленном коде прошу сильно не ругать, так как с JS, до прошлого часа, вообще не сталкивался. Если я что-то неправильно (грубо) написал, то скиньте более правильный код, буду благодарен.

  11. Стас

    Для того чтобы сообщение Заполните поля пропадало, после ввода текста, в функции lightEmpty() измените строку form.find(‘.empty_field’).parents(‘.rline’).find(‘.rfield_error’).css(‘visibility’,’hidden’); на chek(‘.rfield_error’).css(‘visibility’,’hidden’);// чтобы заполните поле пропадало(вместо form.find)

  12. Vadim

    Админ, когда новая статья будет? 🙂

  13. Сергей

    Проверьте ссылку на скачивание. Скачать не возможно. Буду очень рад, если Вы исправите ошибку.

  14. JAH

    Сергей, спасибо, поправил

  15. Максим

    У вас написано » для проверки что это не мобильное устройство, потому что они с jQuery туго дружат».
    Как же быть, если нужно сделать именно для мобильных устройств?

  16. JAH

    Максим, мы сразу пишем для проверяемых инпутов атрибут required и если это не мобильное устройство то его удаляем. Атрибут указывает что это обязательное поле и в мобильных работает стандартная браузерная проверка правильности заполнения

  17. Айрат

    Спасибо, все прекрасно. вот только не могу для применять.

  18. Айрат

    Как к полю текстареа привязать. В предыдущем сообщении тег написал. фильтр не пропустил видимо.

  19. russer

    Подскажите , а как задать класс чтобы поля были в строчку и при этом подсвечивались ?

  20. mcsweb

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

    Автору спасибо.

  21. JAH

    mcsweb, рад помочь) как тока расчехлю свою загруженость, так вылью еще пару тройку посовременней скриптов, есть чем поделиться)

  22. stiv1968

    Вводим неправильные E-mail и телефон: mail@mail.r и 38 (444) 123-45-6_
    и нажимаем Отправить данные.

    Высвечивается *Заполните это поле* в этих полях.
    Данные E-mail остаются.
    А поле телефон очищается.
    Неправильно введённый номер телефона должен оставаться в форме.

  23. JAH

    stiv1968, это стандартное поведение плагина masked input (как только поле телефона теряет фокус и заполнено неправильно или неполностью, то оно очищается)

  24. Роман

    Добрый день!
    Подскажите как данные введенные в форму отправились на e-mail

  25. Роман

    проверка полей не работает в браузере телефона

  26. Влад

    Такой вопрос возник, думаю, актуальный…
    Куда вводить e-mail, на который будет отсылаться заявка, с данной формы???
    Обработчик формы, нужно делать самому? Или есть готовый?
    За ранее, спасибо.
    С уважением, Владислав.

  27. Сергей

    Как добавить автофокус на самое верхнее не правильно или вообще не заполненное поле. Как например у вас реализовано в Форме добавить коментарий?

    Извиняюсь сразу, за возможно глупые вопросы, jquery только начал изучать .

  28. Дмитрий

    Народ, поделитесь пожалуйста обработчиком для этой формы. Не могу прикрутить на сайт.

  29. mydarck

    Здравствуйте, Александр!
    Такой вопрос: как быть если текстовым полям по дизайну предусмотрен атрибут placeholder? В данный момент при наличии placeholder’a поля считаются заполненными.

  30. JAH

    такого не может быть, и я Вова)