我有一个表单，我希望每次验证信息是否为空时，运行一个从CSS导入的库的动画，名为Animate.CSS，因此我创建了一个函数来验证每个输入，因此如果一个输入为空，它将运行我提到的库的“shake”动画。同时，必须添加类。但是在用户没有再次写入输入的情况下在最后被移除，则动画运行。
这是我的表格：

<form action="" id="form">
              <label for="name">Name</label>
              <input
                type="text"
                placeholder="Name"
                id="name"
                minlength="3"
                required
              />
              <br />
              <label for="email">Email</label>
              <input type="email" placeholder="Emai" id="email" required />
              <br />
              <label for="subject">Subject</label>
              <input
                type="text"
                placeholder="Subject"
                id="subject"
                minlength="3"
                required
              />
              <br />
              <label for="message">Message</label>
              <textarea
                name="message"
                id="message"
                minlength="5"
                placeholder="Message"
                required
                style="resize: none; height: 200px"
              ></textarea>
              <br />
              <button type="submit" class="paper-btn" id="submit">
                Send message
              </button>
            </form>

以及Javascript：

(function () {
  var form = document.getElementById("form"),
    name = form.name,
    email = form.email,
    subject = form.subject;
  message = form.message;

  function validateName(e) {
    if (name.value == "" || name.value == null) {
      form.classList.add("animate__animated");
      name.classList.add("animate__shakeX");
      e.preventDefaul();
    } else {
      console.log("error");
    }
  }
  function validateEmail(e) {
    if (email.value == "" || email.value == null) {
      email.classList.add("animate__animated");
      email.classList.add("animate__shakeX");
      e.preventDefaul();
    }
  }

  function validateSubject(e) {
    if (subject.value == "" || subject.value == null) {
      subject.classList.add("animate__animated");
      subject.classList.add("animate__shakeX");
      e.preventDefaul();
    }
  }

  function validateMessage(e) {
    if (subject.value == "" || subject.value == null) {
      message.classList.add("animate__animated");
      message.classList.add("animate__shakeX");
      e.preventDefaul();
    }
  }

  function validateForm(e) {
    validateName(e);
    validateEmail(e);
    validateSubject(e);
    validateMessage(e);
  }
  form.addEventListener("submit", validateForm);
});

显然，这段代码是有效的，但它只在我单击刷新时发生，而不是在我单击提交时发生：

var form = document.getElementById("name");
if (form.value == "" || form.value == null) {
  form.classList.add("animate__animated");
  form.classList.add("animate__shakeX");
}