如果表单为空，则阻止表单提交答案

【问题标题】：Prevent form from submitting if form is empty如果表单为空，则阻止表单提交
【发布时间】：2020-06-01 01:14:02
【问题描述】：

在我的 HTML 表单中，我想使用一个按钮来提交表单，而不是输入类型的提交。如果电子邮件为空，我有一个 javascript 代码会给出错误，也可以防止表单提交。但是，代码似乎不起作用，我收到此错误：Cannot GET /submit 奇怪的是，当你运行它时，代码在 stackoverflow 中工作！

const email = document.getElementById('email');
const form = document.getElementById('form');
const emailMessage = document.getElementById('email-message');

form.addEventListener('submit', e => {
  if (email.value === '' || email.value === null) {
    emailMessage.innerHTML = 'where is the email';
    e.preventDefault();
  } else {
    return true;
  }
});

  <form id="form" action="submit">
            <input id="email" type="email" />
            <button type="submit">Go</button>
            <p id="email-message"></p>
          </form>

【问题讨论】：

在提交事件开始时使用e.preventDefault();form.addEventListener('submit', e => { e.preventDefault(); ...})
您可以尝试使用<button type="button"> 代替type="submit" 吗？？
这能回答你的问题吗？ Email validation using jQuery
@SameerKhan，没用
我已在答案中添加了自定义消息的代码。

标签： javascript html

【解决方案1】：

为什么不直接使用required 属性呢？不需要JS

<input id="email" type="email" required>

这将检查电子邮件字段是否不为空，另外输入的字符串是否为有效的电子邮件格式。

请注意，“必需”HTML 在版本低于 Safari 10.1（2017 年 5 月）的 Safari 浏览器中不起作用

编辑：要显示自定义消息，请订阅 invalid 事件

const email = document.getElementById('email');
email.addEventListener('invalid', function(e){
   if (email.value == '')
     email.setCustomValidity('Where is the email?'); 
   else if (email.validity.typeMismatch)
     email.setCustomValidity('Email address be invalid!'); 
});

您可以了解更多关于Form Validation at Mozilla

【讨论】：

有没有办法将消息显示为电子邮件下方的文本，而不是弹出窗口？
您可以在if 语句中随意处理它。

【解决方案2】：

您的代码运行良好。试试这个

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form id="form" action="submit">
    <input id="email" type="email"/>
    <button type="submit">Go</button>
    <p id="email-message"></p>
</form>

<script>
    const email        = document.getElementById('email');
    const form         = document.getElementById('form');
    const emailMessage = document.getElementById('email-message');

    form.addEventListener('submit', e => {
        if (email.value === '' || email.value === null) {
            emailMessage.innerHTML = 'where is the email';
            e.preventDefault();
        } else {
            return true;
        }
    });
</script>
</body>
</html>

【讨论】：

当我在 stackoverflow 中运行该代码时，它可以工作，但在我的本地，当我单击“Go”按钮时，它会转到带有以下消息的页面：Cannot GET /submit