Javascript 中的 preventDefault 停止发送电子邮件

Posted 2023-05-08

【中文标题】Javascript 中的 preventDefault 停止发送电子邮件

【英文标题】：preventDefault in Javascript stops sending email

【发布时间】：2021-07-25 04:32:46

【问题描述】：

我想寻求一点帮助。我在 jQuery 中看到了一些东西，但我需要 javascript。为了我们的目的，我创建了简单的表格。使用 preventDefault 我没有收到任何邮件，当我删除 preventDefault 时，我收到的邮件包含表单中的所有数据，但没有验证过程，但验证功能仍然存在。谢谢你的帮助。

const form = document.querySelector("form");
const nameInput = document.querySelector("input[name='username']");
const emailInput = document.querySelector("input[name='email']");
const subjectInput = document.querySelector("input[name='subject']");
const messageInput = document.querySelector("textarea[name='message']");

form.addEventListener("submit", (e) => 
    checkInputs();
    e.preventDefault();
);

const checkInputs = () => 
    if(!nameInput.value) 
        showError(nameInput, "Field cannot be blank!");
    


const showError = (input, message) => 
    const formControl = input.parentElement;
    const errorMsg = formControl.querySelector("p");
    formControl.classList.add("error");
    errorMsg.innerText = message;

【参考方案1】：

只有在没有错误的情况下，您才能以编程方式提交表单。

form.addEventListener("submit", (e) => 
    e.preventDefault();

    const hasError = checkInputs();

    if (!hasError) 
        form.submit();
    
);

const checkInputs = () => 
    let hasError = false;

    if(!nameInput.value) 
        hasError = true;
        showError(nameInput, "Field cannot be blank!");
    

    return hasError;

【参考方案2】：

Martin，来自 MDN 页面：

Event 接口的 preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像往常一样采取其默认操作。

如果您将事件放在按钮（默认类型提交）、提交类型的输入或表单上，它将发送电子邮件，这是默认操作。它不会验证任何内容，只需发送电子邮件即可。

您应该阻止默认该事件，验证您想要的所有内容，并使用 fetch 到 php 脚本 或任何其他有效方法发送电子邮件。 另一个缺点是如果你不阻止默认，它会刷新浏览器...

让我知道这是否有意义。

【参考方案3】：

在您的情况下，e.preventDefault() 阻止您的提交处理程序的默认事件，这是提交表单。因此，在您的情况下，您始终会阻止提交表单，因为这与您的验证功能无关。但是您可以将事件对象传递给您的验证函数，并且仅在您的表单未通过验证时才阻止默认值，例如：

form.addEventListener("submit", (e) => 
    checkInputs(e);
);

const checkInputs = (e) => 
    if(!nameInput.value) 
        showError(nameInput, "Field cannot be blank!");
        e.preventDefault();
    

然后，我还会合并提交处理程序和 checkInputs 函数，你会得到什么：

form.addEventListener("submit", (e) => 
    if(!nameInput.value) 
        showError(nameInput, "Field cannot be blank!");
        e.preventDefault();
    
)

【讨论】：

非常感谢 Johannes，现在可以了 :)

不客气，请随时接受此答案，因为它有助于其他 SO 成员对已回答和未回答的问题进行排序。