error in form validation code in 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

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

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.

 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>

error in form validation code in javascript

Question

1 answers

solution1
2 2017-02-03 07:37:55

error in form validation code in javascript

Question

1 answers

solution1 2 2017-02-03 07:37:55

solution1
2 2017-02-03 07:37:55