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

【问题标题】：HTML Form Validation Popup using Javascript使用 Javascript 的 HTML 表单验证弹出窗口
【发布时间】：2013-10-20 21:56:30
【问题描述】：

当我创建的表单中的任何字段在单击提交后为空时，我正在尝试添加一个弹出窗口。当我单击提交时，弹出窗口工作正常，但是当我单击重置按钮或输入所有字段后，我希望弹出窗口消失，这不起作用。请注意，我只能使用 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>

【问题讨论】：

标签： javascript jquery html forms dom

【解决方案1】：

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

使用 Jquery！

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

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

onclick=closePopup()

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

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

  });

【讨论】：

使用 javascript 方式，我将如何识别上面给出的 HTML 的重置按钮？

【解决方案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 就更好了

【讨论】：