title: How to show or hide a label using jquery
body: <p>I have the following code.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label labelfont"&gt;FIRST NAME:&lt;/label&gt;
              &lt;div class="col-sm-6"&gt;
                 &lt;input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName"&gt;
              &lt;/div&gt;
              &lt;label class="col-sm-2 labelfont errorMsg" id="Err_FirstName"&gt;Enter the first name&lt;/label&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Initially <code>"Err_FirstName"</code> is hidden.If the input field is empty on tabout,I want the <code>error label</code> to be displayed.</p>
  
  <p>I have written the following code in blur event.</p>
  
  <pre><code>$("#FirstName").on("blur", function () {
      if ($(this).val().trim().length == 0) {
          $("#Err_FirstName").show();
      }
      else {
          $("#Err_FirstName").hide();
      }
  });
  </code></pre>
  
  <p>the <code>'errormsg'</code> class is defined as</p>
  
  <pre><code>.errorMsg {
     display:none;        
     color:Red;
  }
  </code></pre>
  
  <p>The label is not getting displayed on tabout.Could someone point me in the right direction,in case I am doing something wrong.</p>