Question

我正在尝试创建一个基于HTML表单的验证错误消息。此验证错误消息应出现在＆＃34; div＆＃34;它有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~!#$%^&*]+@+[\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/

Answer 1

因为您要求在前台显示错误。您可以使用Bootstrap Modals或使用HTML和CSS创建自己的模态。以下是您自己https://www.w3schools.com/howto/howto_css_modals.asp

创建的链接

使用Bootstrap Modals的链接 https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

Answer 2

编辑：

使用带有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;
    }

如何在表单顶部显示错误消息

2 个答案: