title: How to validate a First & Last Name without using jQuery plugin
body: <blockquote>
    <p>I am looking to <strong>validate</strong> the <em><code>First Name</code></em> and <em><code>Last Name</code></em> as per the <strong><em><code>Google sign-up page</code></em></strong> using jQuery. My code displays the error message once the <strong>Input box</strong> is <strong>left empty</strong>.  However, how do I go about clearing the error message once the input box is filled up with some data ??</p>
    
    <p>I need to do the following things: </p>
  </blockquote>
  
  <ul>
  <li><p>If <strong>both input boxes</strong> are <strong><em>empty</em></strong>, <strong><em><code>only one error message should pop-up</code></em></strong>, probably the second input box error message.</p></li>
  <li><p>If the <strong>second box</strong> is <strong><em>non-empty</em></strong>, the <strong><em><code>error-message</code></em></strong> should be of <strong><em><code>first input box</code></em></strong>.</p></li>
  </ul>
  
  <blockquote>
    <p>Meanwhile, I have also pasted the equivalent Javascript code which performs the validation as good as its required. </p>
  </blockquote>
  
  <p><strong><code>Could some help me how to get the same reflected in jQuery ?</code></strong></p>
  
  <p><strong>HTML code:</strong> </p>
  
  <pre><code>&lt;div class="first_container"&gt;Name&lt;/div&gt;
      &lt;div id ="nameBlock"&gt;
         &lt;input type="text" name="fname" placeholder="First" id="cust_fname"/&gt;
         &lt;input type="text" name="lname" placeholder="Last"  id="cust_lname"/&gt;
      &lt;/div&gt;
  
   &lt;div id="name_error_msg"&gt; 
      &lt;span id="spanUsernameRequired" style="visibility: hidden; font-weight:bold; color: Red;"&gt;&lt;/span&gt;
      &lt;span id="spanLastnameRequired" style="visibility: hidden; font-weight:bold; color: Red;"&gt;&lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code:</strong></p>
  
  <pre><code>.first_container {
      padding: 3px;
      width: 150px;
      font-style: italic;
      font-weight: bold;
      color: #a77;}
  
  #nameBlock {
      display: inline-block;}
  
  #cust_fname {
      margin: 3px;
      padding: 5px;
      width: 170px;}
  
  #cust_lname {
      margin: 5px;
      padding: 5px;
      width: 170px;}
  
  #name_error_msg{
      margin: 5px;
      color: red;}
  </code></pre>
  
  <p><strong>jQuery code:</strong></p>
  
  <pre><code>  $(document).ready(function() {
        var cust_fname = $('#cust_fname').val();
        var cust_lname = $('#cust_lname').val();
        var name_regex = /^[A-Za-z]+$/;
  
          $("input").blur(function(){
              if(cust_fname.length==0){
                  $(name_error_msg).text("First name can't be empty");
                  $(this).css("border-color", "red");
                  return false;}
  
          $("input").focus(function(){
           $(name_error_msg).text("");
              if(cust_fname.length &gt; 0) { 
                   $(":focus").$(name_error_msg).html().css("border-color", "green"); }
          });
        })
   });
  </code></pre>
  
  <p><strong>Javscript code:</strong></p>
  
  <pre><code>    function fname_validate(){  
  
      var x = document.getElementById("cust_fname").value;
      var regex_char = /^[A-Za-z]+$/;
  
  
      if((x == "") || (x==null)){
  
          document.getElementById("spanUsernameRequired").innerHTML = "&lt;b&gt;&lt;i&gt;You can't leave First Name empty&lt;/b&gt;&lt;/i&gt;";
          document.getElementById("spanUsernameRequired").style.visibility = 'visible'; 
          return false;
          }
  
      else if(isNaN){
          document.getElementById("spanUsernameRequired").innerHTML = "&lt;b&gt;&lt;i&gt;No numbers allowed&lt;/b&gt;&lt;/i&gt;";} 
  
  
      if(x.match(regex_char)){
          document.getElementById("spanUsernameRequired").innerHTML = "";
          document.getElementById("spanUsernameRequired").style.visibility = 'hidden';
  
          if((document.getElementById("cust_lname").value == "") || (document.getElementById("cust_lname").value==null)){
              document.getElementById("spanLastnameRequired").style.visibility = 'visible';
          }
  
          return false;}
      }
  
  
      function lname_validate(){
  
      var x = document.getElementById("cust_lname").value;
      var regex_char  = /^[A-Za-z]+$/;
  
          if(x=="" || x==null){
              document.getElementById("spanLastnameRequired").innerHTML = "&lt;b&gt;&lt;i&gt;You can't leave Last Name empty&lt;/b&gt;&lt;/i&gt;"; 
              document.getElementById("spanLastnameRequired").style.visibility = 'visible';
              /*document.getElementById("spanUsernameRequired").style.borderColor = 'red';*/
              return false;}
  
  
          else if(isNaN){
          document.getElementById("spanLastnameRequired").innerHTML = "&lt;b&gt;&lt;i&gt; No numbers allowed &lt;/b&gt;&lt;/i&gt;";
          }
  
          if(x.match(regex_char)){
              document.getElementById("spanLastnameRequired").innerHTML = "";
              document.getElementById("spanLastnameRequired").style.visibility = 'hidden';
              if((document.getElementById("cust_fname").value == "") || (document.getElementById("cust_fname").value==null)){
                  document.getElementById("spanUsernameRequired").style.visibility = 'visible';
              }
  
              return true;
          }
  } 
  </code></pre>