如何在JavaScript中实现表单提交时的必填项验证与加载动画？

问题根源 #

1. onsubmit="loading()" 调用函数时，this 指向全局window而非提交按钮，导致无法修改按钮内容。
2. 缺少必填字段校验逻辑，直接触发加载动画不符合需求。
3. 表单默认提交会立即刷新页面，加载动画可能还没渲染完成就跳转了。

修复代码 #

HTML 部分

移除onsubmit属性，给表单添加ID方便JS获取：

<form
  id="submit-form"
  action="https://formsubmit.co/2007080c2cf8bd2ebb68506e7aa98c5f"
  method="POST"
  enctype="multipart/form-data"
>
  <!-- 必填字段需添加required属性，示例如下： -->
  <input type="text" name="username" required placeholder="用户名">
  <input type="email" name="email" required placeholder="邮箱">
  <button type="submit" class="submit-btn">提交</button>
</form>

JavaScript 部分

const form = document.getElementById('submit-form');
const submitBtn = document.querySelector('.submit-btn');

// 校验所有必填字段
function checkRequiredFields() {
  const requiredFields = form.querySelectorAll('[required]');
  let isAllFilled = true;

  requiredFields.forEach(field => {
    if (!field.value.trim()) {
      isAllFilled = false;
      // 可选：给未填字段加错误提示样式
      field.classList.add('input-error');
    } else {
      field.classList.remove('input-error');
    }
  });

  return isAllFilled;
}

// 显示加载动画
function showLoading() {
  submitBtn.innerHTML = "<div class='loader'></div>";
  // 禁用按钮防止重复提交
  submitBtn.disabled = true;
}

// 绑定表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();

  // 校验通过再触发加载动画
  if (checkRequiredFields()) {
    showLoading();
    // 延迟提交确保动画渲染完成，时长可根据动画效果调整
    setTimeout(() => {
      form.submit();
    }, 300);
  }
});

关键说明 #

• 用addEventListener替代onsubmit属性，避免this指向问题，同时逻辑更清晰。
• 校验函数会遍历所有带required的字段，确保必填项都已填写。
• 显示加载动画后禁用按钮，防止用户重复点击提交。
• 300ms延迟是为了保证加载动画有足够时间显示出来，可根据实际动画时长调整。

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