Всплывающее окно проверки формы HTML с использованием Javascript

Question

Я пытаюсь добавить всплывающее окно, когда любые поля в форме, которую я создаю, пуст после нажатия submit. Всплывающее окно отлично работает, когда я нажимаю кнопку «Отправить», но когда я нажимаю кнопку «Сброс» или когда все поля введены, я хочу, чтобы всплывающее окно исчезло, что не работает. Обратите внимание, что я могу решить это только с помощью 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, вы можете добавить OnClick функции на ваш HTML

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); 
} 

Если у вас есть какой-то другой проблема отображения на консоли, пожалуйста, поделитесь этим.

еще лучше, если вы можете создать fidde на jsfiddle или jsbin