Почему форма валидная?

Question

Почему кнопка не меняет цвет, если форма подтверждена? Если вы открываете форму и отправляете ее пустой, то по какой-то причине она считается подтвержденной, но если вы вводите данные, а затем удаляете их, то появляется ошибка проверки, и кнопка не отправляет данные (как и должно)

https://jsfiddle.net/qwertyzaqqq/vedhqLsu/12/

https://codepen.io/camobap6/pen/BaKBGJY

const showInputError = (formElement, inputElement, errorMessage, settings) => {
  const errorElement = formElement.querySelector(`#${inputElement.name}-error`);
  inputElement.classList.add(settings.inputErrorClass);
  errorElement.classList.add(settings.errorClass);
  errorElement.textContent = errorMessage;
}

const hideInputError = (formElement, inputElement, settings) => {
  const errorElement = formElement.querySelector(`#${inputElement.name}-error`);
  inputElement.classList.remove(settings.inputErrorClass);
  errorElement.classList.remove(settings.errorClass);
  errorElement.reset();
}

const hasInvalidInput = (inputList) => {
  return inputList.some((inputElement) => {
    return !inputElement.validity.valid;
  });
}

const toggleButtonState = (inputList, buttonElement, settings) => {
  if (hasInvalidInput(inputList)) {
    buttonElement.classList.add(settings.inactiveButtonClass);
    buttonElement.disabled = true;
  } else {
    buttonElement.classList.remove(settings.inactiveButtonClass);
    buttonElement.disabled = false;
  }
}

const checkInputValidity = (formElement, inputElement, settings) => {
  if (inputElement.validity.valid) {
    hideInputError(formElement, inputElement, settings);
  } else {
    showInputError(formElement, inputElement, inputElement.validationMessage, settings);
  }
}

const setEventListeners = (formElement, settings) => {
  const inputList = Array.from(formElement.querySelectorAll(settings.inputSelector));
  const submitButton = formElement.querySelector(settings.submitButtonSelector);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener('input', (evt) => {
      checkInputValidity(formElement, inputElement, settings);
      toggleButtonState(inputList, submitButton, settings);
    });
  });
}

const enableValidation = (settings) => {
  const formList = Array.from(document.querySelectorAll(settings.formSelector));
  formList.forEach((formElement) => {
    setEventListeners(formElement, settings);
  });
}

enableValidation({
  formSelector: '.popup__form',
  inputSelector: '.popup__input',
  submitButtonSelector: '.popup__button',
  inactiveButtonClass: 'popup__save-button_disabled',
  inputErrorClass: 'popup__input_type_error',
  errorClass: 'popup__input-error-message_visible'
});

Answer 1

Проверка не запускается событиями

Вы можете добавить прослушиватель фокуса, чтобы отображать сообщения проверки, когда человек переходит к другому входу. И / Или добавьте событие нажатия клавиш, а затем проверьте наличие evt.keycode === 13 и / или 9, если это правда, пользователь нажимает клавиши ввода / табуляции.

 inputElement.addEventListener('input keyup focusout', (evt) => { <== Add listeners (keyup and focusout)
      checkInputValidity(formElement, inputElement, settings);
      toggleButtonState(inputList, submitButton, settings);
    });

Проверка ввода / нажатия ключи будут выглядеть примерно так.

   inputElement.addEventListener('input keyup focusout', (evt) => {
   if(evt.keycode === 13 || evt.keycode === 9){ // The Enter and Tab keyup check
          checkInputValidity(formElement, inputElement, settings);
          toggleButtonState(inputList, submitButton, settings);
          }
 });