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

Question

我想寻求一点帮助。我在 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;
}

标签： javascriptpreventdefault

Answer 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;
}