Как преобразовать код функционал валидации JS в отдельный класс JS
Ребята привет, помогите разобраться. У меня есть функционал для валидации на страницы для двух форм, всё работает! Вот код
const config = {
formSelector: ".form",
inputSelector: ".popup__input",
submitButtonSelector: ".popup__save",
inputErrorClass: "popup__input_type_error",
errorActiveClass: "popup__input-error_active",
};
// функция включения валидации
const enableValidation = (config) => {
const { formSelector, ...restOfConfig } = config;
const formList = Array.from(document.querySelectorAll(formSelector));
formList.forEach((formElement) => {
setEventListener(formElement, restOfConfig);
});
};
console.log(enableValidation.formList);
// //
// функция навешивания лисенеров на валидацию
const setEventListener = (formElement, config) => {
const { inputSelector, submitButtonSelector, ...restOfConfig } = config;
formElement.addEventListener("submit", function (e) {
e.preventDefault();
});
const inputList = Array.from(formElement.querySelectorAll(inputSelector));
const buttonElement = formElement.querySelector(submitButtonSelector);
inputList.forEach((inputElement) => {
inputElement.addEventListener("input", () => {
checkInputValidity(formElement, inputElement, restOfConfig);
toggleButtonState(buttonElement, inputList);
});
});
toggleButtonState(buttonElement, inputList);
};
//
// функция реагирования на валидность
const checkInputValidity = (formElement, inputElement, config) => {
if (inputElement.validity.valid) {
hideError(formElement, inputElement, config);
} else {
showError(formElement, inputElement, config);
}
};
const toggleButtonState = (buttonElement, inputList) => {
if (hasInvalidInput(inputList)) {
buttonElement.disabled = true;
} else {
buttonElement.disabled = false;
}
};
//
// функция проверки валидности
const hasInvalidInput = (inputList) => {
return inputList.some((inputElement) => !inputElement.validity.valid);
};
//
// функция скрывающая ошибки
const hideError = (formElement, inputElement, config) => {
const { inputErrorClass, errorActiveClass } = config;
const errorElement = formElement.querySelector(`#${inputElement.id}-error`);
errorElement.classList.remove(errorActiveClass);
inputElement.classList.remove(inputErrorClass);
errorElement.textContent = "";
};
//
// функция показывающая ошибки
const showError = (formElement, inputElement, config) => {
const { inputErrorClass, errorActiveClass } = config;
const errorElement = formElement.querySelector(`#${inputElement.id}-error`);
errorElement.classList.add(errorActiveClass);
inputElement.classList.add(inputErrorClass);
errorElement.textContent = inputElement.validationMessage;
};
//
Задача стоит теперь вывести это всё в отдельный класс
class FormValidator {
constructor(config, form) {
this._formSelector = config.formSelector;
this._inputSelector = config.inputSelector;
this._submitButtonSelector = config.submitButtonSelector;
this._inputErrorClass = config.inputErrorClass;
this._inputActiveClass = config.errorActiveClass;
this._form = form;
}
// функция включения валидации
enableValidation = () => {
this._setEventListener();
};
_setEventListener = () => {
forms.forEach((element) => {
element.addEventListener("submit", () => {
console.log("submit");
});
});
};
}
forms.forEach(function (element) {
new FormValidator(element).enableValidation();
});
Не могу понять что должно быть в constructor и как правильно реализовать задачу.