Ошибка Uncaught TypeError: Cannot read properties of null (reading 'classList')
В отладчике горит ошибка, не понимаю в чем проблема, в 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);
Источник: Stack Overflow на русском