сделать проверку на все элементы в методе each библиотеке jquery

219

21 июня 2018, 16:10

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="t"> 
<input type="text" class="t"> 
<input type="text" class="t"> 
 
 
 
 
<script> 
   $('.t').on('keyup', function () { 
 
     let each = $('.t').each(function (i, el) { 
        let val= $(el).val(); 
 
        if (val.length >= 1) { 
            console.log('Hello World!'); 
        } 
     }) 
  }) 
</script>

Мне нужно проверить введено ли значение во всех трех инпутах, только тогда в консоль должно выводится Hello World!. Я хотел попробовать if значение первого элемента && значение второго элемента && значение третьего элемента >= 1 тогда вызывать консоль, но я не пойму как выбрать определенный элемент, нид хелп гайз

Answer 1

$('.t').on('keyup', function() { 
  var hasEmpty = false; 
  let each = $('.t').each(function(i, el) { 
    if (!$(el).val()) 
      hasEmpty = true; 
  }); 
  if (!hasEmpty) 
    console.log('Hello World!'); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="t"> 
<input type="text" class="t"> 
<input type="text" class="t">

Answer 2

Просто для инфы... В современных браузерах, незачем использовать перебор для такой простой проверки - селектором с :[in]valid она выполняется быстрее и удобнее... А также, с ним легко можно порадовать пользователя обратной связью через цвет:

$('.t').on('keyup', function() { 
  if (!$('.t:invalid').length) 
    console.log('Hello World!'); 
});

.t { margin-bottom: 0.5em; border: 1px solid #ccc; outline: none; } 
.t:focus { border-color: #abf; } 
.t:valid { border-color: #9d0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class="t" required><br> 
<input class="t" required><br> 
<input class="t" required>