How to validate the select tag with javascript?

Question

I'm building an animated form, so far i'm only able to validate the input tag and make it work with my form animation, but i need to use the select tag as well in the form, and i not able to make it work with the animation, please help me with some advise. thanks!

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

the select tag should be able to pass the validation in order to pass to the next question.

Answer 1

你的JS代码似乎是面向输入的，你只需要进入animatedForm（）中的else，就必须为你创建一个特殊情况来选择测试选定的值。