I am trying to add a popup when any fields in a form I am creating is empty after clicking submit. The popup works fine when I click submit but when I click the reset button or once all fields have been entered, I want the popup to disappear which is not working. Please note I can only solve this using Javascript(or Jquery) and CSS, and the **HTML code cannot change**.

Javascript (I have included here what I think is relevant):

```
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(); runs in the checkContactForm( this ) function.

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>

```