没有警报的表单验证

Question

我想知道是否有办法在不使用警报的情况下验证表单.通常情况下,如果输入错误的信息或其他内容,您会在输入框旁边看到红色文字.而且我不想使用Jquery.我在html中包含了一个div的红色文本消息 - namemsg,commentmsg,emailmsg.

到目前为止,我只提供了带警报的代码.JavaScript的:

function validateUser()
{
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    {
        alert("Valid Input");
    }

    return true;
}

HTML

 <form name="myForm" method="post">
    <label>*Name:</label>
    <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/>
    <div id="namemsg"></div><br/>

    <label>*E-mail:</label>
    <input type="text" name="email" title="Enter a valid email address" placeholder="me@example.com" onclick="select()" required/>
    <div id="emailmsg">  </div><br/>

    <label>*Comment:</label>
    <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea>
    <div id="commentmsg">  </div>
    <label id="error"> </label> <br/>
    <input type="submit" value="Submit" onclick="return validateUser()"> 
</form>

Answer 1

您可以在已验证字段旁边放置一个范围/标签,其中包含预定义的文本和样式以及显示样式none.如果验证检测到无效输入 - 将显示样式更改为""以使标签可见.

更新

我确实看到你已经预定义了DIV.将其定义为

<div id="emailmsg" style="color:Red;display:none">Not a valid e-mail address</div>

而在JavaScript而不是

alert("Not a valid e-mail address");

使用

document.getElementById("emailmsg").style.display=""