Question

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

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

function showPopUp(){

  popUp = document.createElement( "div" );
  popText = document.createElement( "p" );
  popUp.id = "popUp";
  document.body.appendChild( popUp );


  popText.id = "popText";

  popText.innerHTML = "Still have fields empty";
  popText.style.marginLeft = popUp.width / 2 + "px";
  popText.style.marginTop = popUp.height / 2 + "px";
  document.body.appendChild( popText );


  return false;
}
function closePopUp() {
    popText.parentNode.removeChild(popText);
    popUp.parentNode.removeChild(popUp);
}

showPopUp（）;在checkContactForm（this）函数中运行。

HTML：

<form id="contact" action="" onsubmit="checkContactForm( this ); return false;" >
<p>
  <label for="name">First name:</label>
  <input name="name" id="name" onfocus="resetField( this );" />
</p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" onfocus="resetField( this );"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>

Answer 1

单击重置按钮时，可以调用关闭弹出功能。例如：

使用Jquery！

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

或者使用javascript，您可以在html上添加onclick功能

onclick=closePopup()

要检查所有输入字段，您可以使用每个功能

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

  });

Answer 2

我不认为这段代码可行。您将在控制台中获得popText is undefined和popUp is undefined。

要纠正这种情况，请将closePopUp（）更改为：

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

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

如果您可以在jsfiddle或jsbin

上创建一个fidde，那就更好了

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

2 个答案: