Как сделать кнопку, на которую можно нажать, только если в трех полях ввода ввести текст?

Question

Сделайте кнопку «назад», но такую, которая срабатывает, только если в документе не менее трех полей ввода (input) с типом текст (атрибут type="text" или по умолчанию, без этого атрибута), у которых введен текст «пожалуйста».

const formInput = document.querySelectorAll('.form_input')
const button = document.querySelector('.button')

<div class="box">
  <h1>Кнопка "Назад" cработает, если в поле ввода ввести текст "пожалуйста"</h1>
  <form class="form">
    <input class="form_input" type="text">
    <input class="form_input" type="text">
    <input class="form_input" type="text">
  </form>
  <button class="button">Назад</button>
</div>

Answer 1

Вот таким способом можно заставить кнопку работать должным образом:

const formInput = document.querySelectorAll('.form_input')
const button = document.querySelector('.button')


function checkInput() {
  let flag = true;
  for (npt of formInput) {
    if (npt.value != "пожалуйста") {
      flag = false;
      break;
    }
  }

  if (flag)
    button.disabled = false;
  else
    button.disabled = true;
}


document.forms[0].addEventListener('input', e => {
  if (e.target.classList.contains("form_input"))
    checkInput();
});

form>div {
  display: flex;
  justify-content: end;
  max-width: 485px;
  margin-top: 5px;
}

<div class="box">
  <h1>Кнопка "Назад" cработает, если в поле ввода ввести текст "пожалуйста"</h1>
  <form class="form">
    <input class="form_input" type="text">
    <input class="form_input" type="text">
    <input class="form_input" type="text">
    <div><button class="button" disabled type="submit">Назад</button></div>
  </form>

</div>

БЛОГ НА HUSL

Как сделать кнопку, на которую можно нажать, только если в трех полях ввода ввести текст?

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