Проверка пустых полей формы: универсальный способ

Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.

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

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.


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


Суть этого способа:


  1. В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
  2. Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
  3. Возможность расширения функционала проверкой значения, указанного пользователем в поле.

Пример разметки формы:


<div class="some-form">
  <form action="" method="" class="form js-form-validate">
    <div class="some-form__header title">Заголовок формы #1</div>

    <div class="some-form__line">
      <input type="text" name="name" placeholder="Ваше имя *" data-validate>
      <span class="some-form__hint">Обязательно для заполнения</span>
    </div>
    <div class="some-form__line">
      <input type="tel" name="phone" placeholder="Телефон *" data-validate>
      <span class="some-form__hint">Обязательно для заполнения</span>
    </div>
    <div class="some-form__line">
      <input type="email" name="mail" placeholder="E-mail">
    </div>

    <div class="some-form__submit">
      <input type="submit" value="Отправить" class="button button_submit button_wide">
    </div>
  </form>
</div>

Пример кода проверки полей:


$('.js-form-validate').submit(function () {
    var form = $(this);
    var field = [];
    form.find('input[data-validate]').each(function () {
      field.push('input[data-validate]');
      var value = $(this).val(),
          line = $(this).closest('.some-form__line');
      for(var i=0;i<field.length;i++) {
        if( !value ) {
          line.addClass('some-form__line-required');
          setTimeout(function() {
            line.removeClass('some-form__line-required')
          }.bind(this),2000);
          event.preventDefault();
        }
      }
    });
  });

Пример реализации для двух форм на странице:



Спасибо за внимание!
Tags:
html, js, проверка полей формы

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.