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

Suren Srapyan · Accepted Answer · 2017-02-03 07:37:55Z

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>

Collectives™ on Stack Overflow

error in form validation code in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related