防止空白表单提交

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以获取 static 对此问题的答案，因为网页可能会更改

---

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

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

min and max：指定数值输入类型的最小值和最大值

type：指定数据是否需要是数字、email 地址或其他一些特定的预设类型。

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

Answer 2

一般来说，这是验证字段的错误方法，但无论如何，您的错误是条件和表单提交事件的顺序。 所以它应该是这样的：

 var myForm = document.querySelector('form'); var myTitle = document.getElementById('title'); var myTextfield = document.getElementById('textfield'); myForm.addEventListener('submit', event=>{ if(myTitle.value=="" || myTextfield.value==""){ alert("Fill the form to be submitted"); myTitle.style.backgroundColor=red; myTextfield.style.backgroundColor=red; return false; } else { return true; }; });

Answer 3

您可以添加required字段以进行客户端验证。 对于更高级的验证，您可能希望通过 model 添加服务器端验证。

请参阅实际操作中的required ：

 <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="" required><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

Answer 4

您可以通过多种方式验证表单。 在 Html 5 表单中，您可以添加客户端验证所需的内容。 您还可以从服务器端验证表单。 您还可以使用 ajax 进行实时表单验证。 使用焦点在字段上.. 突出显示未填充的字段。