如果我想在字段为空时阻止提交表单并突出显示空白字段。如果我尝试在字段为空时提交但在字段已填充时不提交,则到目前为止我的代码有效。我似乎无法弄清楚我做错了什么。请帮忙
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();">
最佳答案
转发自:https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation为了获得此问题的静态答案,因为网页可能会发生变化
<小时/>使用内置表单验证 HTML5 表单控件最重要的功能之一是能够在不依赖 JavaScript 的情况下验证大多数用户数据。这是通过在表单元素上使用验证属性来完成的。我们在类(class)的前面已经看到了其中的许多内容,但回顾一下:
required:指定在提交表单之前是否需要填写表单字段。 minlength 和 maxlength:指定文本数据(字符串)的最小和最大长度
min和max:指定数字输入类型的最小值和最大值
type:指定数据是否需要是数字、电子邮件地址或其他特定的预设类型。
pattern:指定正则表达式,定义输入数据需要遵循的模式。
关于javascript - 防止提交空白表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61548816/