HTML 表单 onSubmit 被绕过答案

【问题标题】：HTML Form onSubmit being bypassedHTML 表单 onSubmit 被绕过
【发布时间】：2018-11-23 20:51:29
【问题描述】：

我是 HTML 和 JS 的新手，我正在尝试使用 GitHub Pages 设置“联系”页面。我正在使用formspree.io 将表单和电子邮件提交到应用邮件帐户。

这是交易：我正在尝试设置一个简单的验证，只是为了验证表单字段是否为空（不需要服务器端验证），但“onSubmit”响应似乎是每次都绕过。

这是我的contact.html文件：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Helvetica;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #b00faa;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}

input[type=submit]:hover {
    background-color: #780774;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>
</head>
<body>

<h3>Formulário de Contato</h3>

<div class="container">
  <form action="https://formspree.io/myEmailHere@mail.com" method="post" onsubmit="return validate();">
    <label for="fname">Nome Completo</label>
    <input type="text" id="fname" name="fname" placeholder="Seu nome completo...">

    <label for="email">E-mail</label>
    <input type="text" id="email" name="email" placeholder="Seu e-mail...">

    <label for="subject">Mensagem</label>
    <textarea id="subject" name="subject" placeholder="Digite algo..." style="height:200px"></textarea>

    <input type="submit" value="Enviar">
  </form>
</div>

<p id="error_catch"></p>

<script>
  function validate() {
    var at = document.getElementById("email").value.indexOf("@");
    var message = document.getElementById("subject").value;
    var fname = document.getElementById("fname").value;

    if (fname.length < 1) {
      alert("Digite seu nome...");
      return false;
    }
    if (at === -1) {
        alert("E-mail inválido!");
        return false;
    }
    if (message.length < 1) {
      alert("Digite uma mensagem");
      return false;
    }
    return true;
  }
</script>

</body>
</html>

如果我在 Google Chrome 上本地打开文件，它工作得很好，会显示警报，并且在填写所有字段之前不会提交表单。但是，当我在我的 GHPages 上打开它时，它会绕过验证功能并进入 Formspree 验证码页面。

更多上下文（不确定是否有影响）...

这个文件正在使用 JS 函数包含在我的 index.html 文件中。我的索引由 2 个选项卡组成，这些选项卡在单击时会加载不同的 HTML。以下是 GitHub 存储库以获取更多信息：TellMeApp/support。

我已经尝试过的：

更正 Javascript 函数：我知道如果函数出现错误，则提交将继续进行而无需验证。
创建一个额外的函数来通过 JS 提交表单：在本地工作，而不是在线......
在 Github 页面帮助中寻找解决方案：未找到与此主题相关的任何内容。

对这里可能出了什么问题有什么想法吗？

提前谢谢你！

【问题讨论】：

我不推荐使用 onsubmit 作为属性，但它应该是这样的：onsubmit="validate"
谢谢@GetOffMyLawn，会试试看！
@GetOffMyLawn 虽然您不使用事件属性绝对是正确的，但您所写的其余内容是不正确的。属性onsubmit 上设置的字符串被评估为任何其他代码段，因此"validate" 只是引用该函数并且什么都不做。 OP的代码是正确的。
@RafaelTomazPrado 由于您提到它在本地运行时在 Chrome 中运行良好，因此问题不在于您的代码，而是与在 Github Pages 上托管和运行有关的问题
@Lennholm 是对的，更改属性无济于事。我仍然不知道问题是否出在 GitHub Pages 上，但下面 Devtician 的回答确实有效。感谢您的宝贵时间。

标签： javascript html github-pages

【解决方案1】：

您可以对输入使用 required 属性，而不是使用 onsubmit 属性，如下所示：

<label for="fname">Nome Completo</label>
<input type="text" id="fname" name="fname" placeholder="Seu nome completo..." required>

<label for="email">E-mail</label>
<input type="text" id="email" name="email" placeholder="Seu e-mail..." required>

<label for="subject">Mensagem</label>
<textarea id="subject" name="subject" placeholder="Digite algo..." style="height:200px" required></textarea>

如果您有兴趣阅读有关所需属性的更多信息，可以在此处找到：HTML required Attribute - W3Schools.com

【讨论】：

谢谢，我试试看！
工作就像一个魅力！另外，感谢您提供参考链接。