Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.
Кроме того, на одной странице сайта может размещаться несколько форм, у каждой из которых будет разное количество обязательных для заполнения полей. В результате код будет включать в себя несколько блоков с одинаковыми функциями, но разными условиями, что не всегда является правильным решением.
В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.
В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.
Суть этого способа:
- В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
- Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
- Возможность расширения функционала проверкой значения, указанного пользователем в поле.
Пример разметки формы:
<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();
}
}
});
});
Пример реализации для двух форм на странице:
Автор: весёлый усач
