0

Функционал формы работает как надо. После нажатия на кнопку "Завершить" вёрстка летит к коту под хвост как и мои нервы. Не могу понять почему, буду благодарна если подскажите начинающему джедаю (ಥ﹏ಥ)

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>

2 ответа 2

2

У тебя passverification это класс div, а не input. При вызове функции: setSuccessFor(passverification) классы устанавливаются родительскому элементу, а родительский элемент для passverification - форма, перебивается твой класс box и стили слетают.

1
  • И как это исправить?
    – minorio
    21 окт 2020 в 6:04
0

Я в JS вообще даже не рядом, но заметил, что ты, по нажатию кнопки, начал присуждать стили, вернее их значения, своей форме, которых у тебя, конечно же, нет. Я пометил строки комментарием "//Обрати внимание!!!". Допиши в css стили типа "button_active" и пропиши повторно там стили с изменением цветов или чего ты там добиться хотел присуждением стилей в самом JS, а потом просто пусть по нажатию стиль меняется на тот самый "button_active". Надеюсь ответ максимально раскрыт и поможет.

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.