Ошибка Uncaught TypeError: Cannot read properties of null (reading 'classList')

Рейтинг: 1Ответов: 0Опубликовано: 03.03.2023

В отладчике горит ошибка, не понимаю в чем проблема, в js опыта не много пока что(

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at enableButton (validate.js:82:17)
at toggleButtonState (validate.js:72:5)
at setEventListeners (validate.js:36:3)
at validate.js:59:37
at Array.forEach (<anonymous>)
at enableValidation (validate.js:59:12)
at validate.js:86:1

Вот код:

/* Выводим сообщение об ошибке и меняем стиль поля ввода на содержащий ошибку */
const showInputError = (formElement, inputElement, errorMessage, config) => {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.add(config.inputErrorClass);
  errorElement.textContent = errorMessage;
  errorElement.classList.add(config.errorClass);
};

/* Скрываем сообщение об ошибке и меняем стиль поля ввода на нормальный */
const hideInputError = (formElement, inputElement, config) => {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.remove(config.inputErrorClass);
  errorElement.classList.remove(config.errorClass);
  errorElement.textContent = "";
};

/* Функция проверяет валидность поля */
const checkInputValidity = (formElement, inputElement, config) => {
  if (!inputElement.validity.valid) {
    showInputError(
      formElement,
      inputElement,
      inputElement.validationMessage,
      config
    );
  } else {
    hideInputError(formElement, inputElement, config);
  }
};

const setEventListeners = (formElement, config) => {
  const inputList = Array.from(
    formElement.querySelectorAll(config.inputSelector)
  );
  const buttonElement = formElement.querySelector(config.submitButtonSelector);
  toggleButtonState(inputList, buttonElement, config);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener("input", () => {
      checkInputValidity(formElement, inputElement, config);
      toggleButtonState(inputList, buttonElement, config);
    });
  });
};

const validateFormNow = (formElement, config) => {
  const inputList = Array.from(
    formElement.querySelectorAll(config.inputSelector)
  );
  const buttonElement = formElement.querySelector(config.submitButtonSelector);
  toggleButtonState(inputList, buttonElement, config);
  inputList.forEach((inputElement) => {
    checkInputValidity(formElement, inputElement, config);
  });
};

/* Включаем валидацию для всех форм */
const enableValidation = (config) => {
  const formList = Array.from(document.querySelectorAll(config.formSelector));
  formList.forEach((formElement) => setEventListeners(formElement, config));
};

/* Проверяем есть ли среди полей ввода формы, которые не проходят валидацию */
const hasInvalidInput = (inputList) => {
  return inputList.some((inputElement) => !inputElement.validity.valid);
};

/* Смена состояния кнопки с активной на неактивную */
function toggleButtonState(inputList, buttonElement, config) {
  if (hasInvalidInput(inputList)) {
    disableButton(buttonElement, config);
  } else {
    enableButton(buttonElement, config);
  }
}

function disableButton(buttonElement, config) {
  buttonElement.classList.add(config.inactiveButtonClass);
  buttonElement.setAttribute("disabled", "");
}

function enableButton(buttonElement, config) {
  buttonElement.classList.remove(config.inactiveButtonClass);
  buttonElement.removeAttribute("disabled");
}

enableValidation(validationConfig);

Ответы

Ответов пока нет.