title: Custom form validation vanilla javascript
body: <p>I am working on pure vanilla javascript form validation no third party plugin. When I started the coding it was going more than 40 lines for just validating 4 fields is that possible can we make short and sweet few lines code validation using javascript. And in onfocus of the text field i want to hide the error class and back to normal when i type the values it has to show the black text in color.</p>
  
  <p>Actually currently I am working on one form page it has more than 20 fields if i started coding for validation my god it was going so many numbr of line. :)</p>
  
  <p>Currently I am using the below one</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;input type="text" id="usr_name" name="usr_name" placeholder="User Name"/&gt;
  &lt;input type="text" id="fst_name" name="fst_name" placeholder="First Name"/&gt;
  &lt;input type="text" id="lst_name" name="lst_name" placeholder="Last Name"/&gt;
  &lt;input type="text" id="mdl_name" name="mdl_name" placeholder="Middle Name"/&gt;
  &lt;button onclick="validate()"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>Javascript code</p>
  
  <pre><code>function validate(){
      //alert("check");
      var uname = document.getElementById("usr_name");
      var fname = document.getElementById("fst_name");
      var lname = document.getElementById("lst_name");
  
      var mname = document.getElementById("mdl_name");
  
      if(uname.value.length &lt;= 0){
          uname.placeholder = "kindly enter Uname";
          uname.classList.add("err");
      }
  }
  </code></pre>
  
  <p>Here is the CSS.</p>
  
  <pre><code>.err{
      border:1px solid red;
      color:red;
  }
  .onfcs{
      border:0px solid red;
      color:black;
   }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/karthic2914/3zg6528c/" rel="nofollow">Fiddle Link</a></p>
  
  <p>Please help me.</p>