Q:

How to make error message appear on top of form

I am trying to create a validation error message which goes on top of HTML form. This validation error message should appear in "div" which has 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">

The error message should be shown using javascript. Function alert_box() should set the style for error message and show error message.
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;
}

I am unable to get eroor message box on top of form.
Edit : By on top, I meant error box should appear in foreground while form is in background.
jsfiddle : https://jsfiddle.net/anoopj/eykq9d1p/

A:

EDIT:
Use Modal Box with CSS and JS. Look here
First of all put <div id="pop_up"></div> above <form  method="post" enctype="text/plain" name="review" onsubmit="return validate_ip()">
And then
 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;
    }

