javascript - 防止提交空白表单

Question

如果我想在字段为空时阻止提交表单并突出显示空白字段。如果我尝试在字段为空时提交但在字段已填充时不提交，则到目前为止我的代码有效。我似乎无法弄清楚我做错了什么。请帮忙

JavaScript 代码:

function CheckFields(){
    if((document.getElementById('title').value=="") || (document.getElementById("textfield").value=="")){
        const element = document.querySelector('form');
        element.addEventListener('submit',event =>{
            event.preventDefault();

            alert("Fill the form to be submitted");
            document.getElementById("title").style.backgroundColor=red;
            document.getElementById("title").style.backgroundColor=red;
        });
    }

HTML:

<input name="post" type="submit" value="Post" onclick="CheckFields();">

Answer 1

转发自:https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation为了获得此问题的静态答案，因为网页可能会发生变化

<小时/>

使用内置表单验证HTML5 表单控件最重要的功能之一是能够在不依赖 JavaScript 的情况下验证大多数用户数据。这是通过在表单元素上使用验证属性来完成的。我们在类(class)的前面已经看到了其中的许多内容，但回顾一下:

required:指定在提交表单之前是否需要填写表单字段。minlength 和 maxlength:指定文本数据(字符串)的最小和最大长度

min和max:指定数字输入类型的最小值和最大值

type:指定数据是否需要是数字、电子邮件地址或其他特定的预设类型。

pattern:指定正则表达式，定义输入数据需要遵循的模式。