Node.js中表单提交成功消息错误应用error-message样式的修复

问题场景 #

提交联系表单后邮件发送成功，但页面上显示的"Email successfully sent to recipient!"却应用了error-message的样式。

相关代码 #

mail.js #

const sendMail = (mail) => {
    fetch("/contact",{
        method: "post",
        body: mail,
    }).then((response) => {
        return response.json();
    });
};

index.js（后端） #

transporter.sendMail(mail, (err, data) => {
    if (err) {
        console.log(err);
        res.status(500).send("Something went wrong.");
    } else {
        res.status(200).send("Email successfully sent to recipient!");
    }
});

联系表单HTML #

<div class="form">
    <form id="contact-form" action="contact" method="post" role="form" class="php-email-form" enctype = "multipart/form-data">
        <div class="my-3">
            <div class="loading">Loading</div>
            <div class="error-message"></div>
            <div class="sent-message">Your message has been sent. Thank you!</div>
        </div>
        <div class="text-center"><button type="submit" value="submit" title="Send Message">Send Message</button></div>
    </form>
</div>

问题原因 #

1. 后端返回纯文本字符串，前端fetch请求尝试用response.json()解析，会导致解析失败触发Promise异常，表单逻辑捕获异常后错误显示error-message样式。
2. 前端未根据后端响应的状态和内容，正确切换sent-message与error-message的显示状态。

修复步骤 #

1. 修改后端响应为JSON格式 #

将res.send()改为res.json()，返回包含状态标识和消息的JSON对象：

transporter.sendMail(mail, (err, data) => {
    if (err) {
        console.log(err);
        res.status(500).json({
            status: "error",
            message: "Something went wrong."
        });
    } else {
        res.status(200).json({
            status: "success",
            message: "Email successfully sent to recipient!"
        });
    }
});

2. 完善前端fetch逻辑，控制消息显示 #

更新mail.js，添加状态判断、错误捕获，并手动控制DOM元素的显示/隐藏：

const sendMail = (mail) => {
    // 获取消息元素
    const loadingEl = document.querySelector('.loading');
    const errorEl = document.querySelector('.error-message');
    const successEl = document.querySelector('.sent-message');

    // 初始化状态：显示加载，隐藏其他消息
    loadingEl.style.display = 'block';
    errorEl.style.display = 'none';
    successEl.style.display = 'none';

    fetch("/contact", {
        method: "post",
        body: mail,
    })
    .then((response) => {
        // 先校验HTTP状态码
        if (!response.ok) throw new Error('请求失败');
        return response.json();
    })
    .then((result) => {
        // 成功状态：显示成功消息
        loadingEl.style.display = 'none';
        successEl.textContent = result.message;
        successEl.style.display = 'block';
        // 重置表单
        document.getElementById('contact-form').reset();
    })
    .catch(() => {
        // 错误状态：显示错误消息
        loadingEl.style.display = 'none';
        // 尝试获取后端返回的错误信息
        fetch("/contact", { method: "post", body: mail })
        .then(res => res?.json())
        .then(errResult => {
            errorEl.textContent = errResult?.message || '消息发送失败';
            errorEl.style.display = 'block';
        });
    });
};

3. 绑定表单提交事件，阻止默认行为 #

给表单添加提交监听，禁用默认提交逻辑，改用自定义的sendMail函数：

document.getElementById('contact-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    sendMail(formData);
});

补充说明 #

确保CSS中loading、error-message、sent-message的初始状态为display: none，仅在对应状态切换为显示；若原有php-email-form类自带消息逻辑，需调整或禁用以避免冲突。

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