Как вернуть все элементы с querySelectorAll

#javascript #запрос

У меня есть 5 инпута, нужно сделать так, чтобы если одно из них не заполнить, то
сообщение не должно быть отправлено.



document.querySelector(".btn-info").addEventListener("click", function(){
	var required = document.querySelectorAll(".required");
	if (required.val == "") {
		alert("please fill all the columns");
	}

});
.required {
  display:block;
  padding-bottom:10x;
}

  
  
  
  
  

 



    

Ответы

Ответ 1

Так как querySelectorAll возвращает коллекцию элементов, то проверка required.val
== "" бессмысленна, ибо берется val (которого и одиночного-то элемента нет), которого
в коллекции нет. Соответственно можно пробежать по коллекции и просмотреть значение
value у элементов:



document.querySelector(".btn-info").addEventListener("click", function(){
    let required = document.querySelectorAll(".required");
    let isAllFilled = true;
  
    for (let i = 0; i < required.length; ++i) {
        if (required[i].value.trim() == "") {
            isAllFilled = false;
            break;
	}
    }
  
    if (!isAllFilled)
        alert("please fill all the columns");
});
.required {
  display:block;
  padding-bottom:10x;
}

  
  
  
  
  

 


Ответ 2

Альтернативным решением может стать использование атрибута required и псевдокласса
:invalid в селекторе.

В этом случае достаточно будет проверить, что такие элементы есть.

Пример:



document.querySelector(".btn-info").addEventListener("click", function() {
  var required = document.querySelectorAll(".required:invalid");
  if (required.length) {
    console.log("please fill all the columns");
  }

});
.required {
  display: block;
  padding-bottom: 10x;
}