0

Делаю валидацию формы авторизации. При отсутствии логина и пароля, выдает предупреждения (как и задумано), но когда после этого вводишь их - предупреждение не исчезает, а остаётся.

То есть информация не обновляется, где ошибка?

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>

1
  • Да, правильно, зачем разбираться если что-то не работает, можно же просто скопировать весь код и вставить на stackoverflow, пусть ищут, где я ошибся, им же делать нечего
    – Inventor
    19 окт 2020 в 5:05

1 ответ 1

2

У Вас и не прописано нигде, чтобы скрывать предупреждения. А нужно перед каждой проверкой очищать предыдущее состояние:

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();

  // Для скрытия предупреждений
  setErrorFor(login, '');
  setErrorFor(password, '');

  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>

1
  • 1
    Спасибо, совсем про это забыла.
    – minorio
    19 окт 2020 в 6:19

Ваш ответ

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

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