Control does not exist. Why?
<p>I have my setup below. When rendering the page it throws this error: <code>The name 'UserName' does not exist in the current context</code>. I don't understand why because my control is right above the call. I have this same setup in a separate control and it works just fine. Can anyone explain this?</p>

<pre><code>&lt;asp:TextBox ID="UserName" runat="server" Width="136px"&gt;&lt;/asp:TextBox&gt;

&lt;asp:CustomValidator ID="cvUserNameOrEmailRequired" ValidationGroup="LoginForm" 
    runat="server" CssClass="input-error" ErrorMessage="Username is required"
    ControlToValidate="UserName" Display="Dynamic" 
    ClientValidationFunction="UsernameValidateTextBox" ValidateEmptyText="True"&gt;
    &lt;/asp:CustomValidator&gt;

&lt;script type="text/javascript"&gt;
    function UsernameValidateTextBox(source, arguments) {
        if (arguments.Value % 2 == 0) {
            arguments.IsValid = false;
        } else {
            arguments.IsValid = true;
        }
    }
    **//ERROR IS THROWN HERE**
    $("#&lt;%=UserName.ClientID %&gt;").focus(function () {
        $("#&lt;%=cvUserNameOrEmailRequired.ClientID %&gt;").css({ visibility: "hidden" });
    });
&lt;/script&gt;
</code></pre>

<p><strong>UPDATE</strong></p>

<p>If I remove this call:<code>$("#&lt;%=UserName.ClientID %&gt;").focus(function () {</code> I then get the same error for <code>&lt;%=cvUserNameOrEmailRequired.ClientID %&gt;</code></p>

<p>The code above is inside a <code>&lt;asp:Login&gt;</code>  tag placing it outside removes the error.</p>

<p><strong>UPDATE</strong></p>

<p>I moved the jQuery code outside of the <code>&lt;asp:Login&gt;</code> and the error went away. I used:</p>

<pre><code>$('#&lt;%=LoginForm.FindControl("UserName").ClientID%&gt;').focus(function () {
    $('#&lt;%=LoginForm.FindControl("cvUserNameOrEmailRequired").ClientID%&gt;')
        .css({ visibility: "hidden" });
});
</code></pre>

<p>And no problems. But why doesn't it work within the <code>&lt;asp:Login&gt;</code> tag?</p>
