Форма Регистрации валидация, не работает функция на совпадение паролей
Создаю функцию на совпадение паролей, недавно всё работало. Проверка пустого поля работает ,валидация на совпадение не работает .Сижу уже полтора часа над кодом меняю ,всё безуспешно. Даже отдельную для этого функцию создала. Не могу понять что не так в этот коде . Хелп плис -_-
const form = document.querySelector('.box');
let fields = form.querySelectorAll('.field');
const login = document.getElementById('login');
const password = document.getElementById('password');
const corpassword = document.getElementById('cor_password');
const passverification = document.getElementById('passverification')
const btnvalidation = document.getElementById('#btnvalidation');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('login: ',login.value);
console.log('password: ',password.value);
checkInputs( passDone());
})
function checkInputs() {
//Получаем строку из инпута
const loginValue = login.value.trim();
const passwordValue = password.value.trim();
const corpasswordValue = corpassword.value.trim();
// const passwordValue = password.value.trim();
// const corpasswordValue = corpassword.value.trim();
// Для скрытия предупреждений
setErrorFor(login, '');
setErrorFor(password, '');
setErrorFor(corpassword, '');
if (loginValue === '' ) {
setErrorFor(login, 'Поле Логин обязательно для заполнения');
} else {
setSuccessFor(login);
// alert('Логин введён правильно!')
}
if (passwordValue === '') {
setErrorFor(password, 'Поле Пароль обязательно для заполнения');
} else {
setSuccessFor(password)
// alert('Пароль введён правильно!')
}
if (corpasswordValue === '') {
setErrorFor(corpassword, 'Поле Проверка Пароля обязательно для заполнения');
} else {
setSuccessFor(corpassword)
// alert('Пароль введён правильно!')
}
// if(loginValue,passwordValue,corpasswordValue !== ''){
// const modwindiow = (loginValue,passwordValue,corpasswordValue );
// modwindiow = confirm("Запомнить меня?");
// }else{
// false
// }
}
function passDone() {
const passwordPass = password.value.trim();
const corpasswordPass = corpassword.value.trim();
//Получаем строку из инпута
if (passwordPass !== corpasswordPass) {
setVerPass(passverification, 'Пароли не совпадают');
} else {
setSuccessFor(passverification)
// alert('Пароль введён правильно!')
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-conrol error';
small.innerHTML = message;
formControl.className = 'error';
formControl.style.color = 'red';
formControl.style.border.color = 'red';
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-conrol success';
}
function setVerPass(input, message){
const passverification = formControl.parentElement;
const small = passverification.querySelector('small');
passverification.className = 'form-conrol error';
small.innerHTML = message;
passverification.className = 'error';
passverification.style.color = 'red';
passverification.style.border.color = 'red';
}
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="box">
<h1>Регистрация</h1>
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/">
<img src="./images/facebook.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1" href="https://www.vk.com">
<img src="./images/vk.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1" href="https://www.instagram.com/">
<img src="./images/insta.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1" href="https://www.google.com/">
<img src="./images/google.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<div class="form-conrol">
<input class="field" type="text" id="login" placeholder="ЛОГИН" minlength="4" maxlength="16">
<small></small>
</div>
<div id="passverification">
<div class="form-conrol">
<input class="field" type="text" id="password" placeholder="ПАРОЛЬ" minlength="10" maxlength="18">
<small></small>
</div>
<div class="form-conrol">
<input class="field" type="text" id="cor_password" placeholder="ПРОВЕРКА ПАРОЛЯ" minlength="10" maxlength="18">
<small></small>
</div><small></small></div>
<div class="error"></div>
<!-- <i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i> -->
<div class="forgot text-muted" style="text-decoration: none;">Уже есть аккаунт? <a class="forgot text-muted" href="authorization.html">Войти</a></div>
<input type="submit" class="registrationFormAlert" id="divCheckPasswordMatch" value="Завершить" href="#">
</form>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: HamSter
→ Ссылка
В ф-ии setVerPass не объявили formControl. В консоле ошибка обозначена.
const form = document.querySelector('.box');
let fields = form.querySelectorAll('.field');
const login = document.getElementById('login');
const password = document.getElementById('password');
const corpassword = document.getElementById('cor_password');
const passverification = document.getElementById('passverification')
const btnvalidation = document.getElementById('#btnvalidation');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('login: ', login.value);
console.log('password: ', password.value);
checkInputs(passDone());
})
function checkInputs() {
//Получаем строку из инпута
const loginValue = login.value.trim();
const passwordValue = password.value.trim();
const corpasswordValue = corpassword.value.trim();
// const passwordValue = password.value.trim();
// const corpasswordValue = corpassword.value.trim();
// Для скрытия предупреждений
setErrorFor(login, '');
setErrorFor(password, '');
setErrorFor(corpassword, '');
if (loginValue === '') {
setErrorFor(login, 'Поле Логин обязательно для заполнения');
} else {
setSuccessFor(login);
// alert('Логин введён правильно!')
}
if (passwordValue === '') {
setErrorFor(password, 'Поле Пароль обязательно для заполнения');
} else {
setSuccessFor(password)
// alert('Пароль введён правильно!')
}
if (corpasswordValue === '') {
setErrorFor(corpassword, 'Поле Проверка Пароля обязательно для заполнения');
} else {
setSuccessFor(corpassword)
// alert('Пароль введён правильно!')
}
// if(loginValue,passwordValue,corpasswordValue !== ''){
// const modwindiow = (loginValue,passwordValue,corpasswordValue );
// modwindiow = confirm("Запомнить меня?");
// }else{
// false
// }
}
function passDone() {
const passwordPass = password.value.trim();
const corpasswordPass = corpassword.value.trim();
//Получаем строку из инпута
if (passwordPass !== corpasswordPass) {
setVerPass(passverification, 'Пароли не совпадают');
console.log('Пароль введён НЕправильно!')
} else {
setSuccessFor(passverification)
console.log('Пароль введён правильно!')
}
}
function setErrorFor(input, message) {
let formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-conrol error';
small.innerHTML = message;
formControl.className = 'error';
formControl.style.color = 'red';
formControl.style.border.color = 'red';
}
function setSuccessFor(input) {
let formControl = input.parentElement;
formControl.className = 'form-conrol success';
}
function setVerPass(input, message) {
let formControl = input.parentElement;
const passverification = formControl.parentElement;
const small = passverification.querySelector('small');
passverification.className = 'form-conrol error';
small.innerHTML = message;
passverification.className = 'error';
passverification.style.color = 'red';
passverification.style.border.color = 'red';
}
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="box">
<h1>Регистрация</h1>
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/">
<img src="./images/facebook.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1" href="https://www.vk.com">
<img src="./images/vk.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1" href="https://www.instagram.com/">
<img src="./images/insta.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1" href="https://www.google.com/">
<img src="./images/google.svg" alt="" style="height: 45px; width: 45px;">
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<div class="form-conrol">
<input class="field" type="text" id="login" placeholder="ЛОГИН" minlength="4" maxlength="16">
<small></small>
</div>
<div id="passverification">
<div class="form-conrol">
<input class="field" type="text" id="password" placeholder="ПАРОЛЬ" minlength="10" maxlength="18">
<small></small>
</div>
<div class="form-conrol">
<input class="field" type="text" id="cor_password" placeholder="ПРОВЕРКА ПАРОЛЯ" minlength="10" maxlength="18">
<small></small>
</div><small></small></div>
<div class="error"></div>
<!-- <i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i> -->
<div class="forgot text-muted" style="text-decoration: none;">Уже есть аккаунт? <a class="forgot text-muted" href="authorization.html">Войти</a></div>
<input type="submit" class="registrationFormAlert" id="divCheckPasswordMatch" value="Завершить" href="#">
</form>
</div>
</div>
</div>