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

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

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

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.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();
        }
      }
    });
  });

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



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