Пытаюсь разобраться с валидацией в js. Но при попытках ввода информации почему-то всплывает такая ошибка в консоли:
index.js:174 Uncaught TypeError: Cannot read properties of null (reading 'validationMessage') at showInputError (index.js:174:45) at checkValidity (index.js:164:9)
речь о errorElement.textContent = '';
Помогите, пожалуйста, разобраться.
Мой код:
const checkValidity = (config, formElement, inputElement) => {
const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
if (inputElement.validity.valid) {
hideInputError(config, errorElement, inputElement);
} else {
showInputError(config, errorElement, inputElement);
}
};
const hideInputError = (errorElement, inputElement) => {
errorElement.textContent = '';
inputElement.classList.remove('popup__content_error');
};
const showInputError = (errorElement, inputElement) => {
errorElement.textContent = inputElement.validationMessage;
inputElement.classList.add('popup__content_error');
};
const hasInvalidInput = (inputList) => {
return inputList.some((inputElement) => {
return !inputElement.validity.valid;
});
};
const setEventListeners = (config, formElement) => {
const inputList = Array.from(formElement.querySelectorAll('.popup__content'));
const button = formElement.querySelector('.popup__confirm');
inputList.forEach((inputElement) => {
inputElement.addEventListener("input", () => {
checkValidity(config, formElement, inputElement);
toggleButtonState(config, inputList, button);
});
});
};
const disableButton = (config, button) => {
button.setAttribute("disabled", true);
button.classList.add(config.inactiveButtonClass);
}
const enableButton = (config, button) => {
button.removeAttribute("disabled");
button.classList.remove(config.inactiveButtonClass);
}
const toggleButtonState = (config, inputList, button) => {
if (hasInvalidInput(inputList)) {
disableButton(config, button);
} else {
enableButton(config, button);
}
};
const enableValidation = (config) => {
const formList = Array.from(document.querySelectorAll('.popup__form'));
formList.forEach((formElement) => {
formElement.addEventListener("submit", (evt) => {
evt.preventDefault();
});
setEventListeners(config, formElement);
});
};
enableValidation({
formSelector: ".popup__form",
inputSelector: ".popup__content",
submitButtonSelector: ".popup__confirm",
inactiveButtonClass: "popup__confirm_disabled",
inputErrorClass: "popup__content_error",
errorClass: "popup__content_error_active",
});
При вводе некорректных данных должен всплывать текст ошибки (стандартный браузерный) и кнопка сабмита при этом должна быть неактивна. У меня пока не получилось реализовать:(
validationMessage
переменная null. Тут толькоconsole.log()
вам в помощь и следить, где что передается в цепочке вызовов