Javascript 表单实时检测输入

伙计们，我是新来的，这是我第一次发帖。从5个月前开始学习html/CSS/javascript，现在我正在尝试构建一个非常简单的联系表单，如果没有值，它将显示错误图标+消息错误吹出输入，尝试了12个小时以上，但我在堆栈中没有看到任何效果。。。。。。。已经有了一个家伙的解决方案，他使用javascript操纵样式，并使用css添加和删除错误，但我想用另一种方法，使用document.query选择器使用JAVA操纵DOM

let firstname=document.querySelector（“#inputfirst”）.value；
让form=document.querySelector（“#loginform”）
//表格.addEventListener（'submit'，（e）=>{
//e.preventDefault（）；}）
函数验证（）{
如果（firstname==“”| | firstname==null | | firstname==“”）{
document.querySelector（“#inputfirst”）.classList.add（“firstname”）
document.querySelector（“#firstname_Error”）.innerHTML=“firstname”
返回false；
} 
否则{
document.querySelector（“#inputfirst”）.classList.remove（“firstname”）
document.querySelector（“#firstname_Error”）.innerHTML=“”
}
}
/**仅测试第一次输入**/

.firstname{
背景图像：url（./images/icon error.svg）；
背景位置：24rem13px；
背景重复：无重复；
边框：1px实心rgb（247,10,10）；
}

---

获取函数中元素的值。 其他一切似乎都在起作用。 这是经过编辑的代码

let  firstnameElement  = document.querySelector("#inputfirst");
let form = document.querySelector('#loginform')

//form.addEventListener('submit', (e) => {
//    e.preventDefault();})


function validation() {
  let firstname = firstnameElement.value
   if (firstname == "" || firstname == null || firstname == " ") {
      document.querySelector("#inputfirst").classList.add("firstname")
      document.querySelector("#firstname_Error").innerHTML = "firstname"
      return false;
   } 
   else  {
      document.querySelector("#inputfirst").classList.remove("firstname")
      document.querySelector("#firstname_Error").innerHTML = ""
   }
}

另外，如果您的javascript文件链接在html的开头，请确保添加defer属性，以便它在文档之后加载

<script src="test.js" defer></script>

您知道javascript（不是java）是浏览器中唯一可用的语言吗？（我不计算web组件）