使用Javascript的HTML表单验证弹出窗口

当我正在创建的表单中的任何字段在单击“提交”后为空时，我尝试添加弹出窗口。当我单击“提交”时，弹出窗口工作正常，但当我单击“重置”按钮或输入所有字段后，我希望弹出窗口消失，但它不工作。请注意，我只能使用Javascript（或Jquery）和CSS来解决这个问题，HTML代码不能更改

Javascript（我在这里包含了我认为相关的内容）：

showPopUp（）；在checkContactForm（此）函数中运行

HTML:

名字：

您的留言：


发送消息
重置表单

当您单击“重置”按钮时，可以调用关闭弹出窗口功能。例如：

使用Jquery

$("button:eq(1)").click(function(){
    closePopUp();
}); 

或者使用javascript，您可以在html上添加onclick函数

onclick=closePopup()

要检查所有输入字段，可以使用每个函数

$("input").each(function() {
   var element = $(this);
 if (element.val() == "") {
   isValid = false;
 } 

  });

---

我不认为这个代码可以工作。您将在控制台中看到

popText未定义

和

popUp未定义

要更正此问题，请将closePopUp（）更改为：

function closePopUp() {
    popText = document.getElementById('popText');
    popText.parentNode.removeChild(popText);
    popUp = document.getElementById('popUp');
    popUp.parentNode.removeChild(popUp);
}

如果您在控制台上有其他问题显示，请分享

---

如果您可以使用javascript方式在或

上创建fidde，那么更好的方法是，根据上面的HTML，如何识别重置按钮？重置表单

$("input").each(function() {
   var element = $(this);
 if (element.val() == "") {
   isValid = false;
 } 

  });

function closePopUp() {
    popText = document.getElementById('popText');
    popText.parentNode.removeChild(popText);
    popUp = document.getElementById('popUp');
    popUp.parentNode.removeChild(popUp);
}