6

У меня есть 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;
}
<form id="fld">
  <input id="question1" class="required">
  <input id="question2" class="required">
  <input id="question3" class="required">
  <input id="question4" class="required">
  <input id="question5" class="required">
</form>
 <button type="button" class="btn btn-info">Отправить отзыв</button>

2
  • 1
    спрашиваешь про querySelectorAll, а в коде используешь querySelector
    – Grundy
    30 ноя 2017 в 7:49
  • @Grundy прошу извинить я потестил все и случайно написал querySelector шас изменю
    – Randall
    30 ноя 2017 в 7:50

3 ответа 3

6

Так как 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;
}
<form id="fld">
  <input id="question1" class="required">
  <input id="question2" class="required">
  <input id="question3" class="required">
  <input id="question4" class="required">
  <input id="question5" class="required">
</form>
 <button type="button" class="btn btn-info">Отправить отзыв</button>

6
  • спасибо за помощь
    – Randall
    30 ноя 2017 в 7:49
  • а почему вы используете стандарт ecmascript нельзя ли использовать просто js ?
    – Randall
    30 ноя 2017 в 7:52
  • @Carl .....Шта? 30 ноя 2017 в 7:53
  • почему обявляете переменную через let??@Алексей Шиманский
    – Randall
    30 ноя 2017 в 7:54
  • @Carl просто так захотелось 30 ноя 2017 в 7:54
4

Альтернативным решением может стать использование атрибута 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;
}
<form id="fld">
  <input id="question1" required class="required">
  <input id="question2" required class="required">
  <input id="question3" required class="required">
  <input id="question4" required class="required">
  <input id="question5" required class="required">
</form>
<button type="button" class="btn btn-info">Отправить отзыв</button>

9
  • спасибо @Grundy но у меня библиотека подключена и такой подход не будет эффективен и просто невозможен HTML к измене не подлежит
    – Randall
    30 ноя 2017 в 8:03
  • @Carl, почему ты так думаешь? :)
    – Grundy
    30 ноя 2017 в 8:07
  • я так не думаю я знаю @Grundy.Подключена библиотека и HTML генерируется сам по себе кроме элементов которых я написал.Ситуация такого что у каждого input-а есть массо классов поэтому давать дополнительный элемент не лучшая идея и плюс оно не будет рабтотать там но все равно спасибо что помог
    – Randall
    30 ноя 2017 в 8:11
  • @Carl, ты противоречишь себе: HTML генерируется сам по себе кроме элементов которых я написал. Единственное что нужно, это добавить в эти инпуты атрибут required. Не совсем понял про дополнительные элементы
    – Grundy
    30 ноя 2017 в 8:14
  • если дать дополнительно required оно не будет работать.Так как это не простой инпут.Где тут противоречия я не понял
    – Randall
    30 ноя 2017 в 8:17
0

Так как CSS псевдокласс :required выбирает все элементы с атрибутом required то выборку можно сделать document.querySelectorAll(':required'); При необходимости можно указать форму, в которой производится выборка document.querySelectorAll('#someForm :required'); Проверку можно проводить валидацией форм, объяснение здесь. Так, код можно организовать примерно:

   
const btn = document.querySelector('button');
btn.addEventListener('click', event => {
    let reqd = document.querySelectorAll(':required');       
    reqd.forEach((el,ix) => {
        console.log('field for input ' + ix + ' valid = ' + el.validity.valid + ';\n');
    });
    return false;
});
    <form id="fld" name="fld">
        <input id="question1" required>
        <input id="question2" required>
        <input id="question3" required>
        <input id="question4">
        <input id="question5" required>
    </form>
<button>Заполнено?</button>
   
Валидация осуществляется с помощью интерфейса Constraint validation API, о котором также можно почитать на MDN.

Ваш ответ

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

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