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

我正在尝试创建一个验证错误消息，该消息位于HTML表单的顶部。此验证错误消息应出现在id=弹出的“div”中

<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~!#$%^&*]+@+[\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;
}

var val=/[\w~！\$%^&*]+[\w]+[\w~！\$%^&*]+@+[\w~！\$%^&*]+.+[\w]/；
函数验证_ip（）{
var name=document.getElementById（“uname”）.value；
console.log（名称）；
var mail=document.getElementById（“邮件”）.value；
var testyy=val.test（邮件）；
var-imf=document.getElementById（“我自己”）.value；
如果（name.length，因为您要求在前台显示错误。
您可以使用引导模式，也可以使用HTML和CSS创建自己的模式。
这里有一个你自己创建的链接

使用引导模式的链接
编辑：

将模态框与CSS和JS一起使用

首先，把
放在
上面

然后

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

if（name.length）您是否将div放在表单上方？控制台中会出现什么错误？您需要使用CSS定位将框置于彼此上方。向我们展示您的CSS，可能是z索引或定位问题。不确定为什么每次都要对弹出的
div设置样式
警报框（）
正在被调用，您只需在CSS中执行一次即可。感谢您的回复。但在顶部，我的意思是在z轴上。谢谢，伙计，但在顶部，我的意思是错误框应该出现在前景中，而表单在背景中。您可以使用模式窗口显示@AnoopJaiswalink。只有答案才被视为VLQ。我建议您将链接中的相关内容，以确保答案不会被标记为这样。谢谢。谢谢，伙计，但我的意思是，当表单在后台时，错误框应该出现在前台。使用JS将
z-index:-1
添加到div的css中。希望你能做到这一点！还请记住，z-index仅适用于定位元素，例如作为
position:absolute
或
position:relative
。这没有帮助。错误消息不会出现在前台。在CSS中使用模态类。我有一个很好的例子，说明模态是一种糟糕的设计模式，因为它们存在严重的可访问性问题。如果使用模态，请确保添加所有额外的特性，以确保em可访问。或者干脆跳过情态动词一次又一次，这样可以节省大量的工作。