表单提交时错误提示一闪即逝，请求前端技术解决方案

问题根源 #

你的按钮放在<form>标签内，默认情况下点击按钮会触发表单提交行为，页面会立即刷新，导致刚显示的提示消息随着页面刷新消失。

解决方案 #

有两种简单的处理方式：

方式一：阻止按钮的默认提交行为 #

修改你的JavaScript代码，在点击事件中添加event.preventDefault()来阻止表单提交：

let requestBtn = document.getElementById("requestbtn")
let oops = document.querySelector(".oops")

requestBtn.addEventListener("click", (event) => {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  let emailInput = document.getElementById("email").value
  emailInput === "" ? oops.classList.remove("hidden") : oops.classList.add("hidden")
})

方式二：修改按钮类型 #

直接在HTML中将按钮的type属性设置为button，这样按钮就不会触发表单提交：

<button id="requestbtn" type="button">Request Access</button>

两种方法都能解决页面刷新导致提示消失的问题，选其中一种即可。

内容的提问来源于stack exchange，提问作者Ahmed Alzarka