требование заполнения формы полностью

Question

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

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

btn_1.onclick = function (e) {
    e.preventDefault();

    document.querySelectorAll('.input_1').forEach((el) =>
    {  
       let inputs = Array.from(document.querySelectorAll('.input_1'));
       let inputsValueTrue = inputs.every((input) => input.value);
        if (!inputsValueTrue) {
            el.classList.add('is-required');
            el.placeholder = "Заполните поле";
        } else {
            document.querySelector('form').style.display = "none";
        }
    });
}

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

.is-required::placeholder {
    color: red;
}

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

Answer 1

Можно на лету отслеживать состояние, но подходит ли вам это?

const btn_1 = document.querySelector('.btn');
const inputs = Array.from(document.querySelectorAll('.input_1'))

inputs.forEach((input) =>
{
  input.addEventListener('input', inputValidate);
})

function inputValidate(e)
{ 
  input = e.target;

  input.classList.toggle('is-required', !input.value);
  input.placeholder = input.value ? "" : "Заполните поле";
}


btn_1.onclick = function (e) {
  e.preventDefault();

  inputs.forEach((input) =>
  {
    inputValidate({target: input});
  });
}

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

.is-required::placeholder {
    color: red;
}

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

БЛОГ НА HUSL

требование заполнения формы полностью

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