Переделать функцию 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>`)
}
}
