Как получить значение инпута в режиме реального времени?

Question

[svm2001]

Есть форма, в ней 2 инпута (имя и телефон) и кнопка отправки.
Изначально у кнопки 2 класса. Мне нужно сделать проверку, на то, заполнены ли инпуты. И если оба поля заполнены, то убирать у кнопки один класс.

<form class="footer__form form">
    <input id="footerInputName" type="text" required>
    <input id="footerInputTel"  type="tel" required>
    <button class="button button--gray" type="submit">Отправить</button>
</form>

let footerInputName = document.getElementById("footerInputName").value;
let footerInputTel = document.getElementById("footerInputTel").value;
const footerBtn = document.querySelector(".button--gray");

if(footerInputName && footerInputTel !== "") {
    footerBtn.classList.remove('button--gray');
}

Я понимаю, что этим кодом я вывожу то, что было сохранено при загрузке страницы.
А мне нужно отслеживать значение инпута постоянно. То есть постоянно проверять, пустая она или нет. И если оба поля не путсые, удалять у кнопки класс.

Comments

[Ankhena]

https://learn.javascript.ru/events-change-input

Answer 1

[Stanislav]

Примерно так

const form  = document.getElementsByTagName('form')[0];

const email = document.getElementById('mail');
const emailError = document.querySelector('#mail + span.error');

email.addEventListener('input', function (event) {
  // Каждый раз, когда пользователь что-то вводит,
  // мы проверяем, являются ли поля формы валидными

  if (email.validity.valid) {
    // Если на момент валидации какое-то сообщение об ошибке уже отображается,
    // если поле валидно, удаляем сообщение
    emailError.textContent = ''; // Сбросить содержимое сообщения
    emailError.className = 'error'; // Сбросить визуальное состояние сообщения
  } else {
    // Если поле не валидно, показываем правильную ошибку
    showError();
  }
});

form.addEventListener('submit', function (event) {
  // Если поле email валдно, позволяем форме отправляться

  if(!email.validity.valid) {
    // Если поле email не валидно, отображаем соответствующее сообщение об ошибке
    showError();
    // Затем предотвращаем стандартное событие отправки формы
    event.preventDefault();
  }
});

function showError() {
  if(email.validity.valueMissing) {
    // Если поле пустое,
    // отображаем следующее сообщение об ошибке
    emailError.textContent = 'You need to enter an e-mail address.';
  } else if(email.validity.typeMismatch) {
    // Если поле содержит не email-адрес,
    // отображаем следующее сообщение об ошибке
    emailError.textContent = 'Entered value needs to be an e-mail address.';
  } else if(email.validity.tooShort) {
    // Если содержимое слишком короткое,
    // отображаем следующее сообщение об ошибке
    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
  }

  // Задаём соответствующую стилизацию
  emailError.className = 'error active';
}