function ValidateForm (_form) {
    const errorClass = 'error';
    const successClass = 'success';
    const labelClass = 'form-control';
    const errorItemClass = 'error-item';
    const successItemClass = 'success-item'
    const _elements = _form.elements;

    _form.addEventListener('submit', event => {
        event.preventDefault();
        const formData = new FormData(_form);
        this.checkFormElements();

        if (this.formValidate()) {
            try {
                fetch(_form.action, {
                    method: _form.method,
                    body: formData
                })
                .then(response => {
                    if (response.ok) {
                        console.log('Форма отправлена успешно');
                    } else {
                        console.log('Ошибка отправки формы');
                    }
                })
            } catch(error) {
                console.error('Ошибка: ', error);
            }
        }
    });

    for(let _element of _elements) {
        _element.addEventListener('input', () => {
            this.checkFormSingleElement(_element);
        });
    }
    
    this.checkFormElements = function () {
        for(let _element of _elements) {
            this.checkFormSingleElement(_element);
        }
    }

    this.checkFormSingleElement = function (_element) {
        const reqMessage = _element.dataset.req;
        const emailMessage = _element.dataset.email;
        const telMessage = _element.dataset.tel;
        const nameMessage = _element.dataset.name;
        const surNameMessage = _element.dataset.surname;
        const passwordMessage = _element.dataset.password;
        const successMessage = _element.dataset.success;
        

        this.clearErrorAndSuccess(_element);

        if (reqMessage) {
            this.checkRequired(_element, reqMessage);
        }
        if (emailMessage) {
            this.checkEmail(_element, emailMessage, successMessage);
        }
        if (telMessage) {
            this.checkTel(_element, telMessage, successMessage);
        }
        if (nameMessage) {
            this.checkName(_element, nameMessage, successMessage);
        }
        if (surNameMessage) {
            this.checkName(_element, surNameMessage, successMessage);
        }
        if(passwordMessage) {
            this.checkPassword(passwordMessage, successMessage);
        }
    }

    this.checkRequired = function (_element, reqMessage) {
        const notValidStr = _element.value.trim().length === 0;
        const notValidCheckbox = _element.type === 'checkbox' && _element.checked === false;
        if (notValidStr || notValidCheckbox) {
            this.createErrorTemplate(_element, reqMessage);
        } 
    }

    this.checkName = function (_element, message, successMessage) {
        const nameStr = _element.value.trim();
        const nameRegExp = /^[a-zA-Zа-яА-ЯёЁ\s-]{2,50}$/;
        if (!nameRegExp.test(nameStr)) {
            this.createErrorTemplate(_element, message);
        } else {
            this.createSuccessTemplate(_element, successMessage);
        }
    }

    this.checkEmail = function (_element, message, successMessage) {
        const emailStr = _element.value.trim();
        const emailRegExp = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
        if (!emailRegExp.test(emailStr)) {
            this.createErrorTemplate(_element, message);
        } else {
            this.createSuccessTemplate(_element, successMessage);
        }
    }

    this.checkTel = function (_element, message, successMessage) {
        const phoneStr = _element.value.trim();
        const phoneRegExp = /^\+?[0-9\s\-()]{7,}$/;
        if (!phoneRegExp.test(phoneStr)) {
            this.createErrorTemplate(_element, message);
        } else {
            this.createSuccessTemplate(_element, successMessage);
        }
    }

    this.checkPassword = function (message, successMessage) {
        const allPasswords = _form.querySelectorAll('input[type="password"]');
        const arrPasswordValues = Array.from(allPasswords).map(item => item.value.trim());

        const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        const checkPassByRegExp = arrPasswordValues.every(pass => passwordRegExp.test(pass));
        const checkPassByUniqueness = new Set(arrPasswordValues).size === 1;

        if (!checkPassByUniqueness || !checkPassByRegExp) {
            allPasswords.forEach((value) => this.createErrorTemplate(value, message));
        } else {
            allPasswords.forEach(value => this.createSuccessTemplate(value, successMessage));
        }
    }

    this.createErrorTemplate = function (_element, message) {
        const parent = _element.closest(`.${labelClass}`);
        parent.classList.add(errorClass);
        parent.insertAdjacentHTML('beforeend', `<small class=${errorItemClass}>${message}</small>`);
    }

    this.createSuccessTemplate = function (_element, message) {
        const parent = _element.closest(`.${labelClass}`);
        if (parent) {
            parent.classList.add(successClass);
            parent.insertAdjacentHTML('beforeend',`<small class=${successItemClass}>${message}</small>`)
        }
    }

    this.clearErrorAndSuccess = function (_element) {
        const parent = _element.closest(`.${labelClass}`);
        if (parent) {
            parent.classList.remove(errorClass, successClass);
            parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
        }
    }

    this.formValidate = function () {
        let allValid = true;
        for(let _element of _elements) {
            const parent = _element.closest(`.${labelClass}`);
            if (parent.classList.contains(errorClass)) {
                allValid = false;
                break;
            }
        }
        return allValid;
    }

}
new ValidateForm(document.querySelector('#form'));