如何在点击提交按钮且HTML表单输入为空时用JavaScript添加Animate.css动画？

原代码核心问题 #

• 立即执行函数未调用：末尾缺少()，导致整个脚本完全不执行
• 变量声明语法错误：subject = form.subject;后误用分号，使message变为全局变量
• 验证逻辑错误：validateMessage函数误判subject.value，而非message.value
• 方法拼写错误：e.preventDefaul()应为e.preventDefault()
• 动画未重置：仅添加动画类不移除，重复提交时动画无法再次触发
• 未实现「全空时表单整体抖动」的需求

修复后的完整代码 #

HTML（需先引入Animate.css）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<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 () {
  const form = document.getElementById("form");
  const fields = {
    name: form.name,
    email: form.email,
    subject: form.subject,
    message: form.message
  };

  // 重置元素动画状态，确保重复触发生效
  function resetAnimation(element) {
    element.classList.remove("animate__animated", "animate__shakeX");
    void element.offsetWidth; // 强制触发重绘
  }

  // 为元素添加抖动动画
  function addShakeAnimation(element) {
    resetAnimation(element);
    element.classList.add("animate__animated", "animate__shakeX");
  }

  // 判断字段是否为空
  function isFieldEmpty(field) {
    return field.value.trim() === "";
  }

  function validateForm(e) {
    e.preventDefault(); // 先阻止表单默认提交行为

    const emptyFields = Object.values(fields).filter(isFieldEmpty);
    const isAllFieldsEmpty = emptyFields.length === Object.values(fields).length;

    // 所有字段为空时，表单整体抖动
    if (isAllFieldsEmpty) {
      addShakeAnimation(form);
      return;
    }

    // 为空的字段逐个抖动
    emptyFields.forEach(field => addShakeAnimation(field));
    // 非空字段重置动画状态
    Object.values(fields).filter(field => !isFieldEmpty(field)).forEach(resetAnimation);
  }

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

关键优化说明 #

1. 修复执行问题：补全立即执行函数的调用括号，确保脚本正常运行
2. 统一字段管理：用对象整合所有表单字段，简化遍历与验证逻辑
3. 动画重置机制：每次添加动画前移除旧类并触发重绘，保证重复提交时动画能再次生效
4. 全空判断逻辑：统计空字段数量，等于总字段数时触发表单整体抖动
5. 修正语法错误：修复变量声明、方法拼写等低级错误
6. 优化验证流程：统一阻止默认提交行为，避免多次重复调用preventDefault

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