Как проверить тег выбора с помощью JavaScript? - PullRequest
0 голосов
/ 28 апреля 2019

Я создаю анимированную форму, пока я могу только проверить входной тег и заставить его работать с моей анимацией формы, но мне нужно также использовать тег выбора в форме, и я не могучтобы заставить его работать с анимацией, пожалуйста, помогите мне с некоторыми советами.спасибо!

https://codepen.io/andrewrico/pen/gyEGaw

function animatedForm() {

  const arrows = document.querySelectorAll(".fa-arrow-down");

  arrows.forEach(arrow => {
    arrow.addEventListener("click", () => {
      const input = arrow.previousElementSibling;
      const parent = arrow.parentElement;
      const nextForm = parent.nextElementSibling;

      if (input.type === "text" && validateUser(input)) {
        nextSlide(parent, nextForm);

      } else if (input.type === "email" && validateEmail(input)) {
        nextSlide(parent, nextForm);

      } else if (input.type === "password" && validateUser(input)) {
        nextSlide(parent, nextForm);

      } else {
        parent.style.animation = "shake 0.5s ease";
      }

      parent.addEventListener("animationend", () => {
        parent.style.animation = "";

      });
    });
  });
}

function validateUser(user) {
  if (user.value.length < 6) {
    console.log("not enough characters");
    error("rgb(189, 87, 87)");
    return false;
  } else {
    error("rgb(101, 109, 255)");
    return true;
  }
}

function validateEmail(email) {
  const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (validation.test(email.value)) {
    error("rgb(101, 109, 255)");
    return true;
  } else {
    error("rgb(189, 87, 87)");
    return false;
  }
}

function nextSlide(parent, nextForm) {
  parent.classList.add('innactive');
  parent.classList.remove('active');
  nextForm.classList.add('active');
}

function error(color) {
  document.body.style.background = color;
}

animatedForm();

тег select должен быть в состоянии пройти проверку для перехода к следующему вопросу.

1 Ответ

0 голосов
/ 28 апреля 2019

Ваш JS-код, кажется, ориентирован на ввод, вы просто входите в else в animatedForm () , вам нужно будет создать специальный случай для выбора, чтобы проверить выбранное значение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...