перебор массива с работай над объектами

Question

у меня есть форма с полями, я хочу сделать при нажатии кнопки перебор полей, чтобы при отсутствии текста в поле, добавить ему красный border и текст внутри, как сделать такой перебор?

через for у меня почему то не работает

let btn_1 = document.querySelector('.btn');

btn_1.onclick = function (e) {
    e.preventDefault();
    let inputs = Array.from(document.querySelectorAll('.input_1'));
    
        for (let i = 0 ; i<inputs.length; i++) {
        if (!inputs[i]) {
            inputs.style.border = "1px solid red";
            inputs.value = "Заполните поле";
            };
        };
};

<form>
      <input type="text" class="input_1">
      <input type="text" class="input_1">
      <button class="btn" type="button">отправить</button>  
</form>

Answer 1

const form = document.querySelector('form');

form.addEventListener('submit', (e) =>
{
  e.preventDefault();
  
  [...form.elements].forEach((el) =>
  {
    if (el.tagName != 'INPUT')
    {
      return;
    }
    
    el.classList.toggle('is--required', el.value == '')
  });
});

.is--required
{
  border: 1px solid red;
}

<form>
  <input type="text" class="input_1">
  <input type="text" class="input_1">
  <button class="btn">отправить</button>  
</form>

БЛОГ НА HUSL

перебор массива с работай над объектами

Ответы (1 шт):