2

Пытаюсь разобраться с валидацией в 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",
});

При вводе некорректных данных должен всплывать текст ошибки (стандартный браузерный) и кнопка сабмита при этом должна быть неактивна. У меня пока не получилось реализовать:(

2

1 ответ 1

0
const showInputError = (errorElement, inputElement) => {
    errorElement.textContent = inputElement.validationMessage;
    inputElement.classList.add('popup__content_error');
};

Проверь чему равен inputElement. Вполне возможно он null. Устранить ошибку можно таким образом

errorElement.textContent = inputElement?.validationMessage ?? '';

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.