Делаю валидацию формы авторизации. При отсутствии логина и пароля, выдает предупреждения (как и задумано), но когда после этого вводишь их - предупреждение не исчезает, а остаётся.
То есть информация не обновляется, где ошибка?
const form = document.querySelector('.box');
let fields = form.querySelectorAll('.field');
const login = document.getElementById('login');
const password = document.getElementById('password');
const btnvalidation = document.getElementById('#btnvalidation');
form.addEventListener('submit', (event) => {
event.preventDefault();
// console.log('login: ',login.value);
// console.log('password: ',password.value);
checkInputs();
})
function checkInputs() {
//Получаем строку из инпута
const loginValue = login.value.trim();
const passwordValue = password.value.trim();
if (loginValue === '') {
setErrorFor(login, 'Поле Логин обязательно для заполнения');
} else {
setSuccessFor(login);
}
if (passwordValue === '') {
setErrorFor(password, 'Поле Пароль обязательно для заполнения');
} else {
setSuccessFor(password)
}
}
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';
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-conrol success';
}
<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="ЛОГИН">
<small></small>
</div>
<div class="form-conrol">
<input class="field" type="password" id="password" placeholder="ПАРОЛЬ">
<small></small>
</div>
<!-- <i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i> -->
<a class="forgot text-muted" href="#">Забыли пароль?</a>
<input type="submit" id="btnvalidation" value="Войти" href="#">
</form>