Ошибка при открытии формы: formElement.querySelectorAll is not a function

Мучаюсь с формой и никак не могу понять в чем проблема? Остальные формы работаю нормально и ошибок не выдают, в чем может быть проблема?

Понимаю, что показывает, что formElement не dom объект, но что делать и как исправить не пойму.

Когда открываешь форму, выдает вот такую ошибку :

formElement.querySelectorAll is not a function 
TypeError: formElement.querySelectorAll is not a function 
at clearValidation (webpack://mesto/./src/components/validation.js?:79:47) 
at HTMLDivElement.eval (webpack://mesto/./src/scripts/index.js?:147:77)

Код формы:

const popupAvatar = document.querySelector(".popup_type_avatar");
const profileImageAvatar = document.querySelector(".profile__image");
profileImageAvatar.addEventListener("click", function () {
  openPopup(popupAvatar);
**Я так понимаю, что показывает ее вот тут на 147. и вот тут когда поменял местами тоже осталась**

  clearValidation(validationSettings,formAvatarProfile);
})

const formAvatarProfile = document.forms["avatar-form"];
//const avatarInput = formAvatarProfile.elements["avatar-link"];
const avatarInput = formAvatarProfile.querySelector(".popup__input_type_url");
const buttonSaveAvatar = formAvatarProfile.querySelector(".popup__button");
console.log(buttonSaveAvatar);
console.log(popupAvatar);
function editProfileAvatar (evt) {

  evt.preventDefault();

  //const avatarLink = avatarInput.value;
  saveButton(true, buttonSaveAvatar);
  avatarProfileServer({ avatar: avatarInput.value })
  .then((data) => {
    profileImageAvatar.style.backgroundImage = `url(${data.avatar})`;
    closePopup(popupAvatar);
  })
  .catch((err) => {
    console.log("Произошла ошибка при изменении аватара профиля:", err);
  })
  .finally(() => {
    saveButton(false, buttonSaveAvatar);
    formAvatarProfile.reset();
  });
};

formAvatarProfile.addEventListener("submit", editProf

Код валидации:

const validationSettings = {
  formSelector: ".popup__form",
  inputSelector: ".popup__input",
  submitButtonSelector: ".popup__button",
  inactiveButtonClass: "popup__button_disabled",
  inputErrorClass: "popup__input_type_error",
  errorClass: "popup__error_visible",
};



function showInputError  (formElement, inputElement, errorMessage, validationSettings)  {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.add(validationSettings.inputErrorClass);
  errorElement.classList.add(validationSettings.errorClass);
  errorElement.textContent = errorMessage;
};
console.log(showInputError);
//удаляем класс с ошибкой
function hideInputError  (formElement, inputElement, validationSettings)  {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.remove(validationSettings.inputErrorClass);
  19 errorElement.classList.remove(validationSettings.errorClass);
  errorElement.textContent = "";
  
};

//Проверка валидности
function checkInputValidity (formElement, inputElement, validationSettings)  {
  if (inputElement.validity.patternMismatch) {
    inputElement.setCustomValidity(inputElement.dataset.errorMessage);
  } else {
    inputElement.setCustomValidity("");
  }

  if (!inputElement.validity.valid) {
    showInputError(
      formElement,
      inputElement,
      inputElement.validationMessage,
      validationSettings
    );
  } 
  else {
    hideInputError(formElement, inputElement, validationSettings);
  }
};

function setEventListeners (formElement, validationSettings)  {
  const inputList = Array.from(
    formElement.querySelectorAll(validationSettings.inputSelector)
  );
  const buttonElement = formElement.querySelector(
    validationSettings.submitButtonSelector
  );
  toggleButtonState(inputList, buttonElement, validationSettings);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener("input", function () {
      checkInputValidity(formElement, inputElement, validationSettings);
      toggleButtonState(inputList, buttonElement, validationSettings);
    });
  });
};
// Включаем валидацию
function enableValidation (validationSettings) {
  const formList = Array.from(
    document.querySelectorAll(validationSettings.formSelector)
  );
  formList.forEach(function (formElement) {
    formElement.addEventListener("submit", function (evt) {
      evt.preventDefault();
    });
    setEventListeners(formElement, validationSettings);
  });
}

function hasInvalidInput(inputList) {
  return inputList.some((inputElement) => {
    return !inputElement.validity.valid;
  });
}

//Проверка состояния кнопки
function toggleButtonState (inputList, buttonElement, validationSettings) {
  if (hasInvalidInput(inputList)) {
    buttonElement.disabled = true;
    buttonElement.classList.add(validationSettings.inactiveButtonClass);
  } else {
    buttonElement.disabled = false;
    buttonElement.classList.remove(validationSettings.inactiveButtonClass);
  }
}
//очистка ошибок


function clearValidation (formElement, validationSettings) {
**и вот тут**
  const inputListError = Array.from(formElement.querySelectorAll(validationSettings.inputSelector));
  80. inputListError.forEach((inputElement) => {
    81.  hideInputError(formElement, inputElement, validationSettings);
  });
  const buttonSubmit = formElement.querySelector(validationSettings.submitButtonSelector);
  toggleButtonState(inputListError, buttonSubmit, validationSettings);
}[![при открытие формы выдает данную ошибку][1]][1]

вылезла другая ошибка, когда открываешь форму :

Cannot read properties of null (reading 'classList')
TypeError: Cannot read properties of null (reading 'classList')
    at hideInputError (webpack://mesto/./src/components/validation.js?:19:16)
    at eval (webpack://mesto/./src/components/validation.js?:81:5)
    at Array.forEach (<anonymous>)
    at clearValidation (webpack://mesto/./src/components/validation.js?:80:18)
    at HTMLDivElement.eval (webpack://mesto/./src/scripts/index.js?:146:77)