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