Не понимаю, как сделать кнопку активную при валидации, форма popupEdit, у всех полей значение value заполнены

введите сюда описание изображения

    // Показать текст ошибки
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 isValid = (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', () => {

        isValid(formElement, inputElement, config);
        toggleButtonState(inputList, buttonElement, config);
      });
    });
  }; 
  // Перебор всех форм
  const enableValidation = (config) => {

    const formList = Array.from(document.querySelectorAll(config.formSelector));


    formList.forEach((formElement) => {
      formElement.addEventListener('submit', (evt) => {
        evt.preventDefault();
      });
      setEventListeners(formElement, config);
    });
  };
  // Функция принимает массив полей
  const hasInvalidInput = (inputList) => {
    return inputList.some((inputElement) => {
      return !inputElement.validity.valid;
    })
  }; 

// Проверка состояния кнопки
  const toggleButtonState = (inputList, buttonElement, config) => {

    if (hasInvalidInput(inputList, config)) {
      buttonElement.classList.add(config.inactiveButtonClass);
      buttonElement.disabled = 'disabled';
    } else {

      buttonElement.classList.remove(config.inactiveButtonClass);
      buttonElement.disabled = '';
    }
  }; 

// Конфиг
  enableValidation({
    formSelector: '.popup__container',
    inputSelector: '.popup__text',
    submitButtonSelector: '.popup__button',
    inactiveButtonClass: 'popup__button_disabled',
    inputErrorClass: 'popup__text_error',
    errorClass: 'error_active'
  }); 

скрипты для popup

const profileButton = document.querySelector('.profile__button');
const popupEdit = document.querySelector('.popup-edit');
const profileAvatar = document.querySelector('.profile__title');
const profileSubtitle = document.querySelector('.profile__subtitle')
const popupAuthor = document.querySelector('.popup__text_author');
const popupCharacteristic = document.querySelector('.popup__text_characteristic');
const popupEditButtonClose = document.querySelector('.popup-edit__button-close');
const popupEditForm = document.querySelector('.popup-edit__container');
const buttonSetCards = document.querySelector('.button');
const popupCards = document.querySelector('.popup-cards');
const popurCardsForm = document.querySelector('.popup-cards__container');
const popupCardsButtonClose = document.querySelector('.popup-cards__button-close');
const elementsCards = document.querySelector('.elements');
const templateCards = document.querySelector('#card');
const newCardsElementName = document.querySelector('.popup-cards__name');
const newCardsElementImg = document.querySelector('.popup-cards__url');
const poopImg = document.querySelector('.popup-img');
const poopImgCon = document.querySelector('.popup-img__content');
const poopImgTitle = document.querySelector('.popup-img__title');
const poopImgButtonClosed = document.querySelector('.popup-img__button-close');


// Закрытие на кнопку
const closePopupKeyEscape = (evt) => {
    
    const popurOpen = document.querySelector('.popup_opened');
    if (evt.key === 'Escape' && popurOpen != null) {
        closePopup(popurOpen);
      };
}


// закрытия на клик по области
const closeOverlay = (evt) => {
    const popurOpen = document.querySelector('.popup_opened');
        if(evt.target === popurOpen){
            closePopup(popurOpen);
        };
}
// Открытие popup
function openPopup(data){
    data.classList.add('popup_opened');
    document.addEventListener('keydown', closePopupKeyEscape);
    document.addEventListener('mousedown', closeOverlay);

}
// заполнение полей при открытии
function addInfoPopupEdit () {
    if (popupEdit != null){
        popupAuthor.value = profileAvatar.textContent;
        popupCharacteristic.value = profileSubtitle.textContent;
    }
}
// Закрытие popup
function closePopup(data){
    data.classList.remove('popup_opened');
    
}

// Сохранение полей popupEdit
function savePopupEditForm(evt){
    evt.preventDefault();
    profileAvatar.textContent = popupAuthor.value;
    profileSubtitle.textContent = popupCharacteristic.value;
    closePopup(popupEdit);
}
// Рендер карточек
function rendrList(){
    const itemCards =  initialCards.map(createCards);
    elementsCards.append(...itemCards);
}
// Создание карточек
function createCards(item) {
    const newItem = templateCards.content.cloneNode(true); 
    const headerElement = newItem.querySelector('.element__title');
    const imgElement = newItem.querySelector('.element__img');
    headerElement.textContent = item.name;
    imgElement.src = item.link;
    imgElement.alt = item.name;
    const removeButton = newItem.querySelector('.element__trash');
    
    removeButton.addEventListener('click', removeCard);
    imgElement.addEventListener('click', () => openPoopImg(imgElement, headerElement));
    newItem.querySelector('.element__heart').addEventListener('click', handleLikeButton);
    return newItem;
}

function openPoopImg(img, header){
    openPopup(poopImg);
    poopImgCon.src = img.src;
    poopImgCon.alt = header.textContent;
    poopImgTitle.textContent = header.textContent;
}

function handleLikeButton (evt) {
    evt.target.classList.toggle('element__heart_active');
}



function removeCard(event){
    event.target.closest('.element').remove()
}

function  handleNewCard(event){
    event.preventDefault();
    const headerText = newCardsElementName.value;
    const imgSrc = newCardsElementImg.value;
    const newCards = createCards({ name: headerText , link: imgSrc });
    elementsCards.prepend(newCards);
    closePopup(popupCards);
}


profileButton.addEventListener('click', ()  => {
    openPopup(popupEdit)
    addInfoPopupEdit();

});
buttonSetCards.addEventListener('click', ()  =>{ 
    popurCardsForm.reset()
    openPopup(popupCards);

 
});



popupEditButtonClose.addEventListener('click', ()  => closePopup(popupEdit));
popupCardsButtonClose.addEventListener('click', ()  => closePopup(popupCards));
poopImg.addEventListener('click', ()  => closePopup(poopImg));

popupEditForm.addEventListener('submit', savePopupEditForm);
popurCardsForm.addEventListener('submit',  handleNewCard);

rendrList();

Ответы (0 шт):