0

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

<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 и т.д.?

1 ответ 1

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();
  }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.