Проверка полей на заполнение jquery

368

08 июня 2017, 09:02

Есть следующий блок:

<div class="player">
    <input type="text" class="input_firstname player_input" name="player[][firstname]" placeholder="Введите имя">
    <input type="text" class="input_lastname player_input" name="player[][lastname]" placeholder="Введите фамилию">
    <input type="text" class="input_birthday player_input" name="player[][birthday]" placeholder="Введите дату рождения">
    <input type="text" class="input_passport player_input" name="player[][passport]" placeholder="Серия и номер паспорта">
    <i class="fa fa-check" aria-hidden="true"></i>
</div>

Как при вводе данных в какое-либо поле проверять остальные на заполнение? По умолчанию <i class="fa fa-check" aria-hidden="true"></i> не отображается, необходимо его отобразить только после заполнения всех полей в блоке player.

Сразу скажу, таких блоков много, поэтому нужно использовать this. Также хотелось бы спросить, правильно ли сделано name у этих полей? В итоге получится массив player, где после индекса будут идти firstname, lastname и т.д.?

Answer 1

Здесь могут помочь следующие функции:

change — установка обработчика на событие изменения поля ввода.
closest — нахождение ближайшего элемента к данному.
find — найти элементы в поддереве.
show — показывает элемент.

Таким образом, при каждом изменении полей ввода мы будем проверять, заполнены ли все поля текущего блока, если заполнены, то найдём с помощью функции closest элемент <i> и покажем его.

$('.player input').change(function() {
  let playerBlock = $(this).closest('.player');
  let emptyInputs = playerBlock.find('input:empty');
  if (emptyInputs.length === 0) {
    playerBlock.find('.fa.fa-check').show();
  }
});