JavaScript中的表单验证代码错误

Question

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

script. 脚本。 js file 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";
    }
}

my problem is whenever i click the submit button of the form validation function is called but the error message is not seen enter the username horizontally only hello is there in the span tag why is tag i want to display custom message please enter the username if the user is filled blank in username field when it wants to submit but the code is not working 我的问题是，每当我单击表单验证功能的提交按钮时，都调用了该按钮，但是没有看到错误消息，请水平输入用户名，而您好在span标记中为什么我要显示自定义消息的标记为什么要输入用户名？用户想要提交但代码不起作用时在用户名字段中填写空白

Answer 1

Call the validation function on the button's click and if there is an error so return false to prevent the form from submitting. 单击按钮时单击验证函数，如果有错误，请返回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>

JavaScript中的表单验证代码错误

问题描述

1 个解决方案

解决方案1
2 2017-02-03 07:37:55

JavaScript中的表单验证代码错误

问题描述

1 个解决方案

解决方案1 2 2017-02-03 07:37:55

解决方案1
2 2017-02-03 07:37:55