时间戳

首页 > 解决方案 > 防止空白表单提交

javascript - 防止空白表单提交

问题描述

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

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();">

标签： javascripthtmlcssforms

解决方案

重新发布自：https ://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation ，目的是获得此问题的静态答案，因为网页可能会更改

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

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

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

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

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

推荐阅读