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

У меня есть 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; }

Ответ

Так как 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; }