Функционал формы работает как надо. После нажатия на кнопку "Завершить" вёрстка летит к коту под хвост как и мои нервы. Не могу понять почему, буду благодарна если подскажите начинающему джедаю (ಥ﹏ಥ)
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';
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #272c30;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"],
.box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid#6c757d;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus,
.box input[type="password"]:focus {
width: 300px;
border-color: #63ADD0;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid#6c757d;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover {
color:white;
background:#63ADD0 ;
border: 2px solid #63ADD0;
}
.forgot {
text-decoration: underline;
color:#63ADD0;
}a.text-muted:hover {
text-decoration: underline;
color:#63ADD0 !important;
}
<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>