如果所有输入文本框为空，如何停止表单提交?

Question

我有一个" Update profile ";有大量输入的表单。用户仍然可以更新他们的个人资料，即使他们没有填写所有的输入。例如，如果用户现在只想填写地址字段，并决定省略所有其他输入字段，他们可以自由地这样做。表单仍然会提交。

但是在测试时，当"保存"按钮，即使没有填充任何字段，表单仍然提交并显示成功消息。我想创建一个函数，首先验证是否至少有一个文本框被填满。如果所有的文本框都是空的，我希望弹出一个警告，并阻止表单提交。

我试着从不同的页面搜索，但他们都是从6年前的问题混合在一起，我有困难得到正确的语法。谁能给我提供这些东西的javascript语法，让我可以从那里开始?谢谢你！

Answer 1

使用原生HTML5表单/输入元素。浏览器将自动测试您的输入是否满足类型。

在这个示例中，我们有各种字段(文本、电子邮件、复选框)，它们都是必需的。在所有字段都填好之前，不能提交表单。当提交按钮被点击时，我们使用一个onsubmit监听器连接到表单，它调用一个处理程序，该处理程序使用preventDefault来阻止表单提交，然后记录一条消息。

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit, false);
function handleSubmit(e) {
e.preventDefault();
console.log('Validated');
}

input { display: block; border: 1px solid black; }
input:invalid { border: 1px solid red; }

<form>
Name: <input name="name" type="text" pattern="[A-Za-z]+" required placeholder="Letters only" />
Email: <input name="email" type="email" required placeholder="Valid email"/>
Over 18: <input name="check" type="checkbox" required />
<button type="submit">Submit</button>
</form>