Всем привет!

Сегодня хочу поделиться с Вами простым методом проверки полей формы на заполненность перед отправкой сообщения с помощью jQuery. Скрипт написал я сам, хотя, несколько лет назад такого написать не получилось, 🙂 а очень надо было. Не будем ходить вокруг да около, а займемся делом.

Простая проверка полей формы на заполненость с помощью jQuery

Для того, чтобы нам было что проверять, нужно составить HTML каркас формы, и чуток ее приукрасить CSS стилями, например я по-быстрому сверстал вот такой каркас:

<div class="form_box">
  <form action="#" method="post" class="rf">

    <label for="user_name">Имя пользователя:</label>
    <input type="text" class="rfield" id="user_name" />

    <label for="user_family">Фамилия пользователя</label>
    <input type="text" class="rfield" id="user_family" />

    <label for="user_phone">Телефон пользователя:</label>
    <input type="text" class="rfield" id="user_phone" />

    <label for="user_work">Профессия пользователя:</label>
    <input type="text" class="rfield" id="user_work" />

    <input type="submit" class="btn_submit disabled" value="Отправить данные" />

  </form>
</div>

Немножко описания того, что я написал в каркасе формы:

  • Форма обернута контейнером с классом .form_box
  • Каждой форме на странице, которую нужно проверить, присвоен класс .rf (required fields)
  • Каждому полю формы, которое обязательно к заполнению, присвоен класс .rfield
  • Кнопке «Отправить данные» присвоено два класса .btn_submit и .disabled (один для стилизации, второй для скрипта).

Ну и как всегда совсем немножко стилей для формы:

.form_box {
  width: 300px;
  margin: 40px auto;
}
.form_box label {
  font-size: 13px;
  font-weight: bold;
  color: #444444;
  display: block;
}
.form_box input {
  display: block;
  border: 2px solid #cfcfcf;
  font-size: 14px;
  color: #444444;
  padding: 7px 7px 8px;
  width: 250px;
  margin-bottom: 20px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.form_box input:focus {
  outline: none;
  border-color: #07a6e6;
}
.form_box .btn_submit {
  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_box .btn_submit:hover {
  background: #009ac2;
}
.form_box .btn_submit:active {
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
.form_box .btn_submit.disabled,
.form_box .btn_submit.disabled:hover {
  background: #afdde6;
  cursor: default;
}

Стили достаточно примитивные, поэтому описывать их смысла нет)

Плацдарм для написания скрипта проверки полей формы готов.

Пишем jQuery скрипт:

Пришло время открыть самое интересное: механизм проверки полей формы. Все пояснения в листинге скрипта:

(function( $ ){

$(function() {

  $('.rf').each(function(){
    // Объявляем переменные (форма и кнопка отправки)
	var form = $(this),
        btn = form.find('.btn_submit');

    // Добавляем каждому проверяемому полю, указание что поле пустое
	form.find('.rfield').addClass('empty_field');

    // Функция проверки полей формы
    function checkInput(){
      form.find('.rfield').each(function(){
        if($(this).val() != ''){
          // Если поле не пустое удаляем класс-указание
		$(this).removeClass('empty_field');
        } else {
          // Если поле пустое добавляем класс-указание
		$(this).addClass('empty_field');
        }
      });
    }

    // Функция подсветки незаполненных полей
    function lightEmpty(){
      form.find('.empty_field').css({'border-color':'#d8512d'});
      // Через полсекунды удаляем подсветку
      setTimeout(function(){
        form.find('.empty_field').removeAttr('style');
      },500);
    }

    // Проверка в режиме реального времени
    setInterval(function(){
      // Запускаем функцию проверки полей на заполненность
	  checkInput();
      // Считаем к-во незаполненных полей
      var sizeEmpty = form.find('.empty_field').size();
      // Вешаем условие-тригер на кнопку отправки формы
      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 );

Протестировать работоспособность скрипта можно кликнув по кнопке Demo, также можно скачать исходники к данному уроку кликнув по кнопке Source:

Заключение

Самый приятный момент работы, написанного мною, скрипта это то, что он проверяет все указанные формы на странице, да и проще метода, не используя сторонние плагины, не найти (мне так кажется) и мне нравится, так сказать, сам механизм его работы, нет необходимости проверять каждое поле формы (как я делал когда-то). Надеюсь Вам пригодится мой скромный скрипт (хехе) в новых проектах.

А так как работа кипит все время, есть еще пара полезных статей на эту тему: маскировка и проверка поля телефона и полная проверка полей формы с валидацией email, телефона и чекбоксов!

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

Спасибо за внимание!

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


Комментарии
  1. Виталий Капля

    Годно! Спасибо. Вот бы сюда еще верификацию на мыло прикрутить…

  2. Aleivl

    Отличный скрипт. Уже прикрутил. Спасибо!

  3. Константин

    Аллилуйя! Три дня голову ломал как сделать валидацию формы, чтоб не отправлялись данные пока не будут заполнены все обязательные поля!

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

    Супер, спасибо за ШИКАРНЫЙ скрипт! 8 )

  4. Иван

    Решение просто супер! Спасибо, просто средство от головной боли!!!

  5. Денис

    На сайте jQuery сказано, что метод .size() является устаревшим с версии 1.8, и нужно использовать свойство .length взамен его.

  6. JAH

    Денис, приму к сведению

  7. Денис

    прикрутил скрипт. в firefox работает все. В хроме не отправляются письма почему-то. можно как решить проблему?

  8. Олег

    Спасибо за скрипт,
    После подключения скрипта, форма стала отправляться два раза, кто нибудь сталкивался с таким явлением ?

  9. Артем

    Отличное решение! Спасибо!

  10. JAH

    Денис, отправлял форму аяксом в WP и этим методом чекал поля и все норм во всех браузерах отправляется, попробуйте решение поновей http://www.howtomake.com.ua/front/formcheck-jquery-full-check-form-field.html

  11. Ярослав

    Скажите как сделать что бы на jQuery скрипт не с слалось а был уже в шит в саму программу!

  12. JAH

    Ярослав, не понял вопроса

  13. Ярослав

    а чего в комментарий не вставляет код?? напишу так что если
    лабел
    селект
    оптион
    селект

    почему он тут не срабатывает? подскажите

  14. JAH

    Ярослав, как это не вставляет?

    вот пример, копируешь код со своего блокнота/notepad++ => вставляешь в тело комментария => выделяешь => и нажимаешь кнопку «код»

    вот так:

    			<div id="logo" class="logo">
    				<a href="<?php echo home_url(); ? rel="nofollow">"><?php bloginfo('name'); ?></a>
    			</div>

    опять же, как то понятней напишите суть вопроса)

  15. Ярослав

    вот для ткого не хочет! как с таким быть? подскажите
    Цільове призначення земельної ділянки:

    Особисте селянське господарство
    Садівництво (для дач)
    Будівництво та обслуговування житлового будинку
    Будівництво багатоповерхових будинків
    Торговельно-офісна забудова
    Заповідно-санітарна
    Промисловості, транспорту, зв’язку, енергетики
    Інше призначення

  16. JAH

    типа селект нельзя вставить?

    <select>
    	<option selected>label 1</option>
    	<option>label 2</option>
    	<option>label 3</option>
    	<option>label 4</option>
    </select>
  17. Ярослав

    Да для такого!! оно не работает если поле не выбрано!! как сделать что бы было подскажи!

  18. JAH

    Ярослав, вот тут писал как чекбоксы проверить, сегодня/завтра вечером допишу и для селектов/радиокнопок уже (сечас не могу.. работка)

  19. Ярослав

    ага спасибо буду ждать ))

  20. Виталий

    Я только не пойму зачем таймаут создавать, можно просто при нажатии на отправить проверять!

  21. JAH

    Виталий, в моем новом скрипте все таймауты ушли, как-то выложу вариант поновей — мало времени к сожалению

  22. Имя

    Нажми на кнопку ДЕМО(выше), прокрути скрол вниз так, что бы осталась видна только кнопка «Отправить данные» и нажимай сколько угодно — никакой реакции.. Подсветка работает.. только нужно доработать чтобы перемещаться к месту пустого импута.

  23. JAH

    можно и доработать эт одна строка)

  24. Евгений

    здравствуйте!не подскажете,как можно этот скрипт установить на сайт Joomla 1.5?
    заранее спасибо!

  25. JAH

    Евгений, не подскажу я Jooml’у тока в ознакомительных целях юзал

  26. Евгений

    жаль,но все равно спасибо!

  27. Вячеслав

    Мне кажется что для проверки на пустоту можно и проще сделать. На счет полной проверки есть не плохой скрипт. Устанавливал у себя на сайте работает нормально. Правда проверка на кирилицу немного хромает но это исправимо.
    http://www.germansoft.ru/lesson/jQueryLesson/proverka-dannyh-formy.php

  28. Александр

    Спасибо за решение ) Спасибо за идею реализации) До этого пользовался самописным и не особо удобным решением.

  29. SportGerl

    Во-первых, давайте назначим стили недостоверным полям. В этом примере нам нужно определить стили формы как невалидные, когда та находится в фокусе. Мы добавим красную окантовку, красную тень и созданную в photoshop’е красную иконку для обозначения невалидного поля.

  30. Rahman

    Всем привет! Ребят подскажите вроде подключаю скрипт как надо не обрабатывает инпуты никак

  31. Костя

    А как сделать так, чтобы при error не только border загорался, но еще и дивы всплывали с ошибками?
    Спасибо

  32. Виктор

    Возьму на заметку! Спасибо!

  33. Анна

    спасибо брат!

  34. Олег

    Не пойму, валидация работает, но если все поля заполнены форма не отправляется