HTML表单验证弹出使用Javascript

我想添加一个弹出窗口，当我创建的窗体中的任何字段是单击提交后为空。弹出工作正常，当我点击提交，但当我点击重置按钮或一旦所有字段已输入，我想弹出消失这是行不通的。请注意我只能使用Javascript（或Jquery）和CSS解决此问题，并且HTML代码不能更改。HTML表单验证弹出使用Javascript

使用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>

来源

2013-10-13 Amber

你可以当你点击复位键叫做关闭弹出窗口的功能。例如：

用jquery！

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

或者使用JavaScript，你可以在你的HTML

onclick=closePopup()

添加的onclick功能对于检查所有的输入字段，你可以使用每个功能

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

    });

来源

2013-10-13 03:33:09 WhatisSober

使用JavaScript方式fidde，我将如何确定给我上面的HTML复位按钮？ – Amber

– WhatisSober

我不认为这个代码可以工作。您将在控制台中获得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

来源

2013-10-13 04:09:32 Srihari

HTML表单验证弹出使用Javascript

回答

相关问题