如何在点击表单提交按钮时用JavaScript触发Animate.CSS动画？

原代码存在的问题 #

• 独立的验证代码直接在页面加载时执行，导致刷新就触发动画
• e.preventDefaul()拼写错误，应为e.preventDefault()
• validateMessage函数错误判断subject.value，实际应检查message.value
• 动画类添加后未移除，无法重复触发动画
• 变量声明时message = form.message前误用分号，导致变量全局暴露
• 自执行函数未正确调用，末尾缺少()

修复后的完整代码 #

HTML（仅修正邮箱输入框的拼写错误） #

<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="Email" 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"),
    nameInput = form.name,
    email = form.email,
    subject = form.subject,
    message = form.message;

  // 通用动画处理：添加动画类，动画结束后自动移除
  function triggerShake(element) {
    element.classList.add("animate__animated", "animate__shakeX");
    element.addEventListener("animationend", function removeAnimation() {
      element.classList.remove("animate__animated", "animate__shakeX");
      element.removeEventListener("animationend", removeAnimation);
    });
  }

  function validateForm(e) {
    e.preventDefault();
    let isValid = true;

    // 验证姓名
    if (!nameInput.value.trim()) {
      triggerShake(nameInput);
      isValid = false;
    }
    // 验证邮箱
    if (!email.value.trim()) {
      triggerShake(email);
      isValid = false;
    }
    // 验证主题
    if (!subject.value.trim()) {
      triggerShake(subject);
      isValid = false;
    }
    // 验证消息
    if (!message.value.trim()) {
      triggerShake(message);
      isValid = false;
    }

    // 全部验证通过后提交表单
    if (isValid) {
      form.submit();
    }
  }

  form.addEventListener("submit", validateForm);
})();

关键修复说明 #

1. 移除页面加载触发的代码：删掉那段独立的验证逻辑，避免刷新时自动触发动画
2. 修正拼写错误：将所有e.preventDefaul()改为e.preventDefault()
3. 修复字段验证逻辑：把validateMessage里的subject.value改为message.value
4. 实现动画类自动移除：封装triggerShake函数，利用animationend事件在动画结束后移除类名，保证可重复触发
5. 修正变量声明：把message = form.message前的分号改为逗号，避免变量全局化；将name重命名为nameInput，避免和全局window.name冲突
6. 优化验证流程：统一在validateForm里批量验证所有字段，先阻止默认提交，全部有效后再手动提交，避免多次调用preventDefault的问题
7. 正确调用自执行函数：末尾添加()，确保代码在页面加载时执行并绑定事件

内容的提问来源于stack exchange，提问作者user17937398