Formspree表单提交正常但#status成功/错误提示消息不显示问题求助

问题根因 #

• 你的#status提示元素按常规交互逻辑初始状态为隐藏，现有代码没有在请求结束后设置该元素可见，所以修改了内容也看不到
• 提交前没有清除上一次的状态类，多次提交后会同时存在success和error两个类，引发样式冲突导致提示无法正常展示
• fetch的回调逻辑存在逻辑漏洞：fetch只要收到服务器返回就会进入then回调，哪怕返回4xx、5xx类错误状态码也不会触发catch，只有网络断连这类底层请求失败才会走catch分支，导致错误场景下也可能展示成功提示

修复后的JS代码 #

var form = document.getElementById("contact-form");
var status = document.getElementById("status");

// 重置提示状态的工具函数
function resetStatus() {
  // 移除所有状态类
  status.classList.remove('success', 'error');
  status.innerHTML = '';
  // 隐藏提示框，和你初始的隐藏逻辑保持一致即可
  status.style.display = 'none';
}

async function handleSubmit(event) {
  event.preventDefault();
  // 提交前先清空上一次的状态
  resetStatus();
  var data = new FormData(event.target);
  fetch(event.target.action, {
    method: form.method,
    body: data,
    headers: {
        'Accept': 'application/json'
    }
  }).then(response => {
    // 校验响应是否真的成功，状态码2xx才为成功
    if (!response.ok) {
      throw new Error('服务端返回错误');
    }
    status.classList.add('success');
    status.innerHTML = "发送成功";
    // 显示提示框，根据你的样式需求调整为block/flex等
    status.style.display = 'block';
    form.reset();
    // 可选：3秒后自动隐藏提示
    setTimeout(resetStatus, 3000);
  }).catch(error => {
    status.classList.add('error');
    status.innerHTML = "提交失败，请稍后重试";
    status.style.display = 'block';
    setTimeout(resetStatus, 3000);
  });
}
form.addEventListener("submit", handleSubmit);

额外排查项 #

如果修改后还是无法显示，按以下顺序检查：

• 确认CSS中.success和.error的样式选择器书写正确，没有设置不可见相关属性（比如opacity: 0、visibility: hidden）
• 检查#status元素的层级，若被其他元素遮挡，可给#status添加z-index: 999属性调高显示优先级
• 确认#status元素的位置没有超出可视区域

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