Валидация форм, рефакторинг (передать необходимые селекторы аргументами в методы, вместо обращения к глобальному объекту)

Question

Изучаю js. Есть код, который проверяет поля в формах на валидность. Работает исправно, но.. Собственно вопрос(сама ошибка на скриншоте), как можно переписать, например, строку в функции showError - inputElement.classList.add(enableValidation.inputErrorClass); чтобы она не была обращена к глобальному объекту enableValidation ? Увы нигде не нашел ответа или похожего примера, как можно такой вопрос разрешить..

const enableValidation = {
  formSelector: ".popup__form",
  inputSelector: ".popup__text_input",
  submitButtonSelector: ".popup__submit",
  inactiveButtonClass: ".popup__submit_disabled",
  inputErrorClass: ".popup__text_invalid",
  errorClass: "`.${inputElement.id}-error`",
  errorInput: ".popup__text-input"
};

const showError = (formElement, inputElement, errorMessage) => {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.add(enableValidation.inputErrorClass);
  errorElement.textContent = errorMessage;
  errorElement.classList.add(enableValidation.errorInput);
};

const hideError = (formElement, inputElement) => {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.remove(".popup__text_invalid");
  errorElement.classList.remove(enableValidation.errorInput);
  errorElement.textContent = "";
};

const checkInputValidity = (formElement, inputElement) => {
  if (!inputElement.validity.valid) {
    showError(formElement, inputElement, inputElement.validationMessage);
  } else {
    hideError(formElement, inputElement);
  }
};

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

const toggleButtonState = (inputList, buttonElement) => {
  if (hasInvalidInput(inputList)) {
    buttonElement.setAttribute("disabled", true);
    buttonElement.classList.add(enableValidation.inactiveButtonClass);
  } else {
    buttonElement.removeAttribute("disabled", false);
    buttonElement.classList.remove(enableValidation.inactiveButtonClass);
  }
};

const setEventListeners = (formElement) => {
  buttonState(formElement);
};

function buttonState(formElement) {
  const inputList = Array.from(
    formElement.querySelectorAll(enableValidation.inputSelector)
  );
  const buttonElement = formElement.querySelector(enableValidation.submitButtonSelector);
  toggleButtonState(inputList, buttonElement);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener("input", function () {
      checkInputValidity(formElement, inputElement);
      toggleButtonState(inputList, buttonElement);
    });
  });
}

function isValid() {
  const formList = Array.from(document.querySelectorAll(enableValidation.formSelector));
  formList.forEach((formElement) => {
    formElement.addEventListener("submit", (evt) => {
      evt.preventDefault();
    });
    setEventListeners(formElement);
  });
}

isValid();

Answer 1

Вам нужно изменить сигнатуру функции, то есть добавить параметры, и потом в качестве этих параметров при вызове функции задавать ваши классы. Если параметров становится слишком много (четыре — это уже многовато), подумайте, не заменить ли все параметры одним объектом с параметрами-полями.
Ещё вам стоит различать название класса в качестве селектора — тут оно используется с точкой, условным знаком класса, — и название класса, которое вы добавляете или удаляете в classList, тут оно должно быть чистым именем без точки.

Поэтому вам стоит исправить и все соответствующие места, например, по такому варианту:

const showError = (formElement, inputElement, errorMessage, inputErrorClass, errorInput) => {
  const errorElement = formElement.querySelector(`.${inputElement.id}-error`);
  inputElement.classList.add(inputErrorClass);
  errorElement.textContent = errorMessage;
  errorElement.classList.add(errorInput);
};

// ...
  showError(formElement, inputElement, inputElement.validationMessage, 'popup__text_invalid', 'popup__text-input');

О том, как заменить множество параметров на один объект с параметрами, можно почитать, например тут: Умные параметры функций или тут: 24.6.6 Named parameters.

Вы можете также просто передавать в функцию enableValidation в качестве одного из параметров, только не забудьте удалить в нём точки из тех названий классов, которые используете не в качестве селекторов.

БЛОГ НА HUSL

Валидация форм, рефакторинг (передать необходимые селекторы аргументами в методы, вместо обращения к глобальному объекту)

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