Как проверить коллекцию input на пустоту?

Question

[Mesuti]

Один input понятно, как проверить:

if (input === "") {
   alert('Пустой')
} else { 
   alert('Заполненый')
}

А если этих input много?
И нужно, чтобы каждый был заполнен.
А если один не заполнен, выдавать ошибку.

Пробовал перебором:

for (let i = 0; i < inputs.length; i++) {
   if (inputs[i].value === "") {
      alert('Пустой')
   } else {
      alert('Заполненый')
   }
}

Но после первого успешного выдает, что все ок.

Или все-таки придется вставлять чекер типа checkAllInput = true\false? В каком месте тогда будет идти назначение этого чекера?

Answer 1

[0xD34F]

const isEmpty = [...inputs].some(n => !n.value);

// или

const isEmpty = !Array.prototype.every.call(inputs, n => n.value);

// или

let isEmpty = false;
for (const n of inputs) {
  if (!n.value) {
    isEmpty = true;
    break;
  }
}

// или

let isEmpty = false;
for (let i = -1; ++i < inputs.length && !(isEmpty = !inputs[i].value);) ;

// или

const isEmpty = (function isEmpty(i) {
  return i < inputs.length && (!inputs[i].value || isEmpty(-~i));
})(0);

Comments

[Mesuti]

в какое место можно указать, что будет если найден пустой и что будет если пустой не будет найден?

[0xD34F]

Mesuti, думайте.

[Mesuti]

0xD34F, спасибо за ответ! Сейчас додумаю и верный опубликую здесь

[Mesuti]

Разобрался.

[...inputs].some(n => !n.value) 

// [...inputs] - это массив элементов
// .some - перебор всех элементов
// n => !n.value - стрелочная функция с одним аргументом

Однако, метод .some проверяет сразу все элементы на false, и если хоть один true, то ответом будет true.

Для проверки нескольких input, больше подойдет метод .every. Потому что он будет выдавать ошибку до тех пор, пока каждый input не выдаст true.

Answer 2

[Роман]

https://learn.javascript.ru/array-iteration#every-some

Comments

[Mesuti]

Сообразил =)
Спасибо!

Единственное, возможно, Array создал не кроссбраузерно..

<input type="text"> <br>
<input type="text"> <br>
<input type="text"> <br>
<input type="text"> <br>
<input type="text"> <br>

<button>Все заполнены?</button>

let inputs = Array.from(document.getElementsByTagName("input"));

    function isPositive(e) {
        return e.value !== "";
    }

    document.getElementsByTagName("button")[0].addEventListener('click', function () {
        console.log(inputs.some(isPositive));  // если все пустые выдаст ошибку, если хоть один полный то ошибки не будет
        console.log(inputs.every(isPositive));  // если хоть один пустой, тогда выдаст ошибку, если все полные то ошибки не будет
    });