Как корректно валидировать поля пароль?

Question

[Дмитрий Ярощук]

Проблема заключается в том что когда я ввожу данные любое поле пароль то появляются ошибки о некорректном пароле в другом поле пароль.

Answer 1

[Владимир Римидалв]

Переделать функцию checkPassword, применять проверку по регулярке к каждому элементу отдельно, проверку на совпадение только при вводе подтверждения пароля

data-passwordrepeat="Проверьте правильность пароля"

...
const passwordMessage = _element.dataset.password;
const passwordMessageRepeat = _element.dataset.passwordrepeat;
...
if(passwordMessage) {
            this.checkPassword(_element, passwordMessage, successMessage);
        }
        if(passwordMessageRepeat) {
            this.checkPassword(_element, passwordMessage, successMessage);
            this.matchingPasswords(passwordMessage, successMessage);
        }
...
this.checkPassword = function (_element, message, successMessage) {
        const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
        const checkPassByRegExp = passwordRegExp.test(_element.value);

        if (!checkPassByRegExp) {
          this.createErrorTemplate(_element, message);
        } else {
          this.createSuccessTemplate(_element, successMessage);
        }
    }

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

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

Что-то типо такого, над качеством кода сам покури

PS оффтоп

this.createErrorTemplate = function (_element, message) {
        const parent = _element.closest(`.${labelClass}`);
        parent.classList.add(errorClass);
        parent.classList.remove(successClass);
        parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
        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.classList.remove(errorClass);
            parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
            parent.insertAdjacentHTML('beforeend',`<small class=${successItemClass}>${message}</small>`)
        }
    }