javascript中的表单验证代码错误答案

【问题标题】：error in form validation code in javascriptjavascript中的表单验证代码错误
【发布时间】：2017-06-20 12:22:24
【问题描述】：

form.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation in Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
    <div id="form">
        <h1>Registration Form</h1><br><br>
        <form name="registerform" onsubmit="validation()">
            <label>FirstName:</label>
            <input type="text" name="firstname" placeholder="firstname"/>
            <span class="error" id="firstnameerror">hello</span><br><br>
            <label>LastName:</label>
            <input type="text" name="lastname" placeholder="lastname"/><br><br>
            <label>Email:</label>
            <input type="email" name="email" placeholder="email"/><br><br>
            <label>UserName:</label>
            <input type="text" name="username" placeholder="username"/><br><br>
            <label>Password:</label>
            <input type="password" name="password" placeholder="*******"/><br><br>
            <button type="submit" name="submit" >Register</button>
        </form>
    </div>
    <script src="script.js"></script>   
</body>
</head>
</html>

style.css
*{
    margin:0px;
    padding:0px;
}
body{
    background-color:skyblue;
}
form{
    margin-left:400px;
    margin-top:100px;
}
h1{
    text-align:center;
}
input{
    width:40%;
    height:35px;
}
label{
    width:120px;
    float:left;
    height:35px;
    font-size:25px;
}
button{
    width:120px;
    height:50px;
    border-radius:6px;
    background-color:green;
    color:black;
}

脚本。 js文件

function validation(){
    var firstname=document.forms["registerform"]["firstname"].value;
    var lastname=document.forms["registerform"]["lastname"].value;
    var email=document.forms["registerform"]["email"].value;
    var username=document.forms["registerform"]["username"].value;
    var pwd=document.forms["registerform"]["password"].value;

    if(firstname=="")
    {
        document.getElementById("firstnameerror").innerHTML="Please enter the username";
    }
}

我的问题是，每当我单击表单验证功能的提交按钮时，但看不到错误消息，水平输入用户名只有 hello 在 span 标签中有为什么我要显示自定义消息的标签请输入用户名，如果用户想提交时在用户名字段中填写空白但代码不起作用

【问题讨论】：

标签： javascript html css

【解决方案1】：

点击按钮时调用验证函数，如果有错误则返回false以防止表单提交。

function validation(){
    var firstname=document.forms["registerform"]["firstname"].value;
    var lastname=document.forms["registerform"]["lastname"].value;
    var email=document.forms["registerform"]["email"].value;
    var username=document.forms["registerform"]["username"].value;
    var pwd=document.forms["registerform"]["password"].value;
    
    if(firstname=="")
    {
        document.getElementById("firstnameerror").innerHTML="Please enter the username";
        return false;
    }
}

    margin:0px;
    padding:0px;
}
body{
    background-color:skyblue;
}
form{
    margin-left:400px;
    margin-top:100px;
}
h1{
    text-align:center;
}
input{
    width:40%;
    height:35px;
}
label{
    width:120px;
    float:left;
    height:35px;
    font-size:25px;
}
button{
    width:120px;
    height:50px;
    border-radius:6px;
    background-color:green;
    color:black;
}
scri

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation in Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
    <div id="form">
        <h1>Registration Form</h1><br><br>
        <form name="registerform" >
            <label>FirstName:</label>
            <input type="text" name="firstname" placeholder="firstname"/>
            <span class="error" id="firstnameerror">hello</span><br><br>
            <label>LastName:</label>
            <input type="text" name="lastname" placeholder="lastname"/><br><br>
            <label>Email:</label>
            <input type="email" name="email" placeholder="email"/><br><br>
            <label>UserName:</label>
            <input type="text" name="username" placeholder="username"/><br><br>
            <label>Password:</label>
            <input type="password" name="password" placeholder="*******"/><br><br>
            <button type="submit" name="submit" onclick="validation()">Register</button>
        </form>
    </div>
</body>
</head>
</html>

【讨论】：