title: Display bootstrap validation icons with jQuery
body: <p>I want to know how can I programmatically swap between validation messages once the textbox focus is out. </p>
  
  <p>I have this markup:</p>
  
  <pre><code>  &lt;div class="form-group" style="width: 100%;" id="divFirstName" runat="server"&gt;
                                          &lt;input type="text" placeholder="Student First Name" runat="server" id="txtFirstName" clientidmode="Static" value="" class="form-control" maxlength="30" /&gt;
                                          &lt;span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" id="tt2" clientidmode="Static" runat="server" Visible="False"&gt;&lt;/span&gt;
                                      &lt;span id="inputSuccess2Status" runat="server" clientidmode="Static" Visible="False" class="sr-only"&gt;(success)&lt;/span&gt;
                                      &lt;span class="glyphicon glyphicon-remove form-control-feedback" Visible="False" runat="server" aria-hidden="true"&gt;&lt;/span&gt;
                                      &lt;span id="inputError2Status" class="sr-only" runat="server" Visible="False"&gt;(error)&lt;/span&gt;
                                      &lt;/div&gt;
  </code></pre>
  
  <p>Then I have this script in case there is a value in the textbox:</p>
  
  <pre><code> $(this).attr("aria-describedby", "inputSuccess2Status");
                  $("#tt2").attr("visibility", "visible");
                  $("#inputSuccess2Status").attr("visibility", "visible");
  </code></pre>
  
  <p>No glyphicon is shown once the script is executed.</p>
  
  <p>Do you see anything wrong? Am I overdoing some things here? What I simply want to do is on focus out of the control, if there is a value show glyphicon-ok otherwise show glyphicon-remove. </p>