title: document.getElementById("<%= errorIcon.ClientID %>"); is giving null
body: <p>I am trying to have server + client-side validation for my registration page. I want to invoke a JS func when my TextBox control loses focus(onBlur).  </p>
  
  <p><strong>Code in aspx page</strong></p>
  
  <pre><code>&lt;div id="nameDiv"&gt;              
      &lt;asp:UpdatePanel ID="updatePanelName" runat="server"&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:Label ID="labelName" runat="server" Text="Enter Your Name"&gt;&lt;/asp:Label&gt;
              &lt;asp:TextBox ID="textBoxName" runat="server" placeholder="Enter Your Name" 
                onBlur="check(this)"&gt;&lt;/asp:TextBox&gt;
              &lt;i class="fa fa-exclamation-circle errorSign" id="errorIcon" runat="server"&gt;&lt;/i&gt;                      
              &lt;asp:Label ID="labelNameError" runat="server" Text="Name can't be blank" ForeColor="Red"&gt; 
                &lt;/asp:Label&gt;
          &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript Code</strong></p>
  
  <pre><code>function check(txtBox) {
      var errIcon = document.getElementById("&lt;%= errorIcon.ClientID %&gt;");
      txt = txtBox.value;
      if (txt.length &lt; 1)
          errIcon.style.visibility = "visible";
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display:inline-block;
      position:relative;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }
  
  
  .errorSign{
      position:absolute;
      margin-right:30px;
      left:1050px;
      top:220px;
      visibility:hidden;
  }
  </code></pre>