提交未填写必填字段的表单时无法停止函数执行答案

【问题标题】：Can't stop function execution when submitting a form with required fields not filled提交未填写必填字段的表单时无法停止函数执行
【发布时间】：2021-09-22 07:28:51
【问题描述】：

这可能是一个简单的逻辑问题，我可能做错了什么，但我找不到原因。

当我的表单被提交时，我正在使用一个小 API 来发送带有一些 JS 代码 (emailJS) 的邮件。我可以让 html 说“请填写此字段”，但邮件仍然发送。

我尝试使用 preventDefault 和 stopImmediatePropagation ：

HTML

<label for="watts1">Device 1:</label>
<input type="number" required/>
<input type="submit" id="submitButton" value="Send form"/>

document.getElementById("submitButton").addEventListener("click", function (e) {
    // e.preventDefault();
    // e.stopImmediatePropagation();

    
    form.subject = `${form.name} ${form.surname} ...`
    form.body = `${form.name} ${form.surname} ...`


    Email.send({
        SecureToken: "***",
        To: "***",
        From: `***`,
        Subject: `${form.subject}`,
        Body: `${form.body}`,
    }).then((message) => alert(message));
});

我对编码还是很陌生，我在不同的网站上找到了很多解决方案来解决任何以前的问题，但在这里我想找到一种简单的方法来制作它，而不是我还无法理解的奇怪解决方案。

提前致谢！

【问题讨论】：

尝试在表单提交处理程序上阻止默认值
preventDefault 阻止默认操作并且不会停止您的发送，因为它是点击事件而不是提交事件。 stopImmediatePropagation 停止事件转发，并且不会停止您的发送。一个简单的if 就足够了。但是，请注意，每个人都可以将您的发送调用复制到控制台并发送邮件（理论上）。
document.getElementById("formID").addEventListener("submit", function (e) { e.preventDefault(); HTML5 验证适用于提交事件
您没有进行任何验证。检查form.name 和form.surname 是否符合您的预期（例如，最小字符数等），如果不是，请在Email.send 之前使用return;，这将中断函数的执行。
@mplungjan 这是一个 AJAX 调用而不是提交事件。看不到preventDefault 将如何停止任何事情，因为实际提交无关紧要。

标签： javascript validation submit form-submit

【解决方案1】：

HTML5 required 验证通常适用于提交事件

如果不需要表单，可以检查字段的有效性：

注意我把按钮改成了 type="button"

document.getElementById("sendButton").addEventListener("click", function(e) {
  if (document.getElementById("number").checkValidity()) {

    console.log("sending"); // never reached if number is empty
    /*
      Email.send({
        SecureToken: "***",
        To: "***",
        From: `***`,
        Subject: `${form.subject}`,
        Body: `${form.body}`,
      }).then((message) => alert(message));
      */
  }
});

<label for="watts1">Device 1:</label>
<input type="number" required id="number" />
<input type="button" id="sendButton" value="Send form" />

使用表单提交事件

document.getElementById("formID").addEventListener("submit", function(e) {
  e.preventDefault(); // necessary here
  console.log("sending"); // never reached if number is empty
  /*
    Email.send({
      SecureToken: "***",
      To: "***",
      From: `***`,
      Subject: `${form.subject}`,
      Body: `${form.body}`,
    }).then((message) => alert(message));
    */
});

<form id="formID">
  <label for="watts1">Device 1:</label>
  <input type="number" required/>
  <input type="submit" id="submitButton" value="Send form" />
</form>

【讨论】：

嘿，谢谢，第二个解决方案正是我错过的逻辑，非常感谢！
有趣，我以为你想要第一个版本，因为你没有表格 - 请accept the answer