如何在窗体顶部显示错误消息

-2

我试图创建一个验证错误消息，该消息位于HTML窗体之上。此验证错误消息应出现在“分区”具有ID = POP_UP如何在窗体顶部显示错误消息

<form method="post" enctype="text/plain" name="review" onsubmit="return validate_ip()"> 

    <input type="text" name="uname" id="uname" placeholder="Enter your name"><br> 
    <input type="Email" name="mail" id="mail" placeholder="Enter email id"><br> 

    <div id="pop_up"></div> 

    <textarea name="text" id="myself" placeholder="Say something about yourself"></textarea><br> 
      <br> 
    <input type="submit" name="submit" value="send">

应该使用javascript显示该错误消息。函数alert_box（）应该设置错误消息的样式并显示错误消息。

var val=/[\w~!#$%^&*]+[\W]+[\w~!#$%^&*][email protected]+[\w~!#$%^&*]+.+[\w]/; 

function validate_ip(){ 
    var name=document.getElementById("uname").value; 
    console.log(name); 
    var mail=document.getElementById("mail").value; 
    var testyy=val.test(mail); 
    var myself=document.getElementById("myself").value; 
    if (name.length<3){ 
     alert_box("Enter your name"); 
     document.getElementById('uname').focus(); 
     return false; 
    } 

    else if (!testyy){ 
     alert_box("Reenter Email id"); 
     document.getElementById("mail").focus(); 
     return false; 
    } 
    else if(myself.length<60) 
    { 
     alert_box("Atleast say 30 letters about yourself"); 
     document.getElementById("myself").focus(); 
     return false; 
    } 
    else 
     return true;         
    } 


function alert_box(a){ 
    var x= document.getElementById("pop_up"); 

    x.style.height="200px"; 
    x.style.width="200px"; 
    x.style.background="red"; 
    x.innerHTML=a; 
}

我无法在窗体顶部获取eroor消息框。编辑：在上面，我的意思是错误框应显示在前台，而窗体在后台。

的jsfiddle：https://jsfiddle.net/anoopj/eykq9d1p/

来源

2017-06-29 Anoop Jaiswal

你有没有把股利的形式上面？ – InvincibleM

您在控制台中遇到什么错误？ – baao

您需要使用CSS定位才能使框相互重叠。 https://stackoverflow.com/questions/44831670/how-to-make-error-message-appear-on-top-of-form –

编辑：

使用模式对话框用CSS和JS。看here

首先放<div id="pop_up"></div>上述<form method="post" enctype="text/plain" name="review" onsubmit="return validate_ip()">

然后

if (name.length<3){ 
     document.getElementById('pop_up').innerHTML="Enter your name"; 
     document.getElementById('uname').focus(); 
     return false; 
    } 

    else if (!testyy){ 
     document.getElementById('pop_up').innerHTML="Reenter your email"; 
     document.getElementById("mail").focus(); 
     return false; 
    } 
    else if(myself.length<60) 
    { 
     document.getElementById('pop_up').innerHTML="Atleast say 30 letters about yourself"; 
     document.getElementById("myself").focus(); 
     return false; 
    }

来源

2017-06-29 17:45:13

谢谢，哥们，但在上面，我的意思是错误框应该出现在前台，而窗体在后台。 –

使用JS将'z-index：-1'添加到div的css中。希望你能做到！还记得z-index只适用于位置元素，如'position：absolute'或'position：relative'。 –

这没有帮助。错误消息不会弹出到前景中。 –

既然你问到显示前景的错误。您可以使用Bootstrap Modals或使用HTML和CSS创建自己的模式。下面是创建自己的https://www.w3schools.com/howto/howto_css_modals.asp

链接，使用引导情态动词的链接 https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

来源

2017-06-29 17:42:52 praveen

感谢您的回复。但最重要的是我的意思是在Z轴上。 –

谢谢，哥们，但在顶部，我的意思是错误框应该出现在前台，而窗体是在后台 –

你可以使用模态窗口来显示错误 – praveen

如何在窗体顶部显示错误消息

回答

相关问题