класс не добавляется обратно к вводу с итерационной функцией Javascript

Question

Я создаю простую функцию, которая проверяет, заполнены ли все входы или нет для входов с определенным классом. У меня проблема в том, что функция выполняется правильно один раз, но не добавляет класс скрытия, если ввод пуст.

   <i class="text-success fa fa-check hide-info-complete" id="info-check"></i>
   <input class="info-input" name="school" />
   <input class="info-input" name="bus" />


 function checkInfoFormOnBlur() {
        var form_complete_check = document.getElementById("info-check");
        $('.info-input').each(function() {
            if ($(this).val() === '') {
                form_complete_check.classList.add("hide-info-complete-check-mark");
            } else if ($(this).val() !== '') {
                form_complete_check.classList.remove("hide-info-complete-check-mark");
            }
        });
    }

setInterval(function(){ checkInfoFormOnBlur(); }, 3000);

Если оба поля имеют значение, это работает - но он не работает, когда один ввод пуст после первого запуска. класс hide-info-complete не отправляется обратно в тег i.

Как можно рекурсивно проверить, заполнены ли все входные данные или нет с помощью setInterval, и правильно удалить класс hide-info-complete, если вход больше не имеет значения.

Answer 1

Вам нужно поменять чек. Ваш код только смотрит на последний индекс, и это определяет, что произойдет. И нет смысла делать это по таймеру.

Добавьте прослушиватели событий к элементам, и я использую фильтр, чтобы найти любые непроверенные элементы.

var inputs = $(".info-check")
var check = $("#info-check")
inputs.on("change", function() {
  var isValid = inputs.filter(function(input) {
    return this.value.trim().length === 0
  }).length === 0
  check.toggleClass('hide-info-complete', !isValid)
}).change()

.hide-info-complete {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<i class="text-success fa fa-check hide-info-complete" id="info-check"></i>

<input class="info-check" name="school" />
<input class="info-check" name="bus" />

Делать это без jQuery

var inputs = Array.from(document.querySelectorAll(".info-check"))
var check = document.querySelector("#info-check")

var checkValid = function () {
  var isValid = inputs.every(function(input) {
    return input.value.trim().length > 0
  })
  check.classList.toggle('hide-info-complete', !isValid)
}

inputs.forEach(function (input) {
  input.addEventListener("change", checkValid)
})

.hide-info-complete {
  visibility: hidden;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<i class="text-success fa fa-check hide-info-complete" id="info-check"></i>

<input class="info-check" name="school" />
<input class="info-check" name="bus" />

и с HTML5, который вообще не требует JavaScript.

form:invalid #info-check{  
  visibility: hidden;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form>
  <i class="text-success fa fa-check" id="info-check"></i>

  <input class="info-check" name="school" required />
  <input class="info-check" name="bus" required />
</form>

Answer 2

• Если элементы начинаются как пустые, поместите класс в элемент для начала, чтобы он был скрыт
• Используйте обработчик событий для обработки при изменении значения, а не интервал
  • Когда значение изменяется, переключите класс так, чтобы он имел класс, только если какие-либо из входных данных пустые

var $infoCheck = $('#info-check');
var $inputs = $('.info-input').on('input', function(){
  $infoCheck.toggleClass(
    'hide-info-complete-check-mark',
    $inputs.filter(function(){ return !this.value.trim(); }).length > 0
  );
});

.hide-info-complete-check-mark { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="text-success fa fa-check hide-info-complete hide-info-complete-check-mark" id="info-check">Info Check</i>
<input class="info-input" name="school" />
<input class="info-input" name="bus" />