ASP.NET Form Validation Doesn't work first time

Question

<asp:UpdatePanel ID="LoginPanel" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <div id="login">
            <div class="row">
                <div class="label">
                    <asp:Label ID="lblUsername" Text="<%$ Resources:Login, UserNameField %>" runat="server" />
                </div>
                <div class="field">
                    <asp:TextBox ID="txtUsername" MaxLength="12" runat="server" />
                    <asp:RequiredFieldValidator ID="rfvUsername" ControlToValidate="txtUsername" ValidationGroup="vgLogin" SetFocusOnError="true"
                        ErrorMessage="*" ToolTip="<%$ Resources:Login, UserNameRequired %>" runat="server" />
                </div>
            </div>

            <div class="row">
                <div class="label">
                    <asp:Label ID="lblPassword" Text="<%$ Resources:Login, PasswordField %>" runat="server" />
                </div>
                <div class="field">
                    <asp:TextBox ID="txtPassword" MaxLength="12" TextMode="Password" runat="server" />
                    <asp:RequiredFieldValidator ID="rfvPassword" ControlToValidate="txtPassword" ValidationGroup="vgLogin" SetFocusOnError="true"
                        ErrorMessage="*" ToolTip="<%$ Resources:Login, PasswordRequired %>"  runat="server" />
                </div>
            </div>

            <div class="row">
                <div class="label">
                    <asp:Label ID="lblRemember" Text="<%$ Resources:Login, RememberField %>" runat="server" />
                </div>
                <div>
                    <asp:CheckBox ID="chkRemember" Checked="true" ToolTip="<%$ Resources:Login, RememberToolTip %>" runat="server" />
                </div>
            </div>

            <div class="buttons">
                <asp:Button ID="btnLogin" Text="<%$ Resources:Login, Command %>" OnClick="btnLogin_Click" ValidationGroup="vgLogin" CausesValidation="true" runat="server" />
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

The first time around, validators won't check whether the fields are completed or not, the form just gets submitted no matter what, after that initial hiccup, the form validates correctly each time.

I know I can just ask (and should, regardless) if Page.IsValid at server-side, but I still would like the validation to correctly alert the user input mistake the first time around instead of waiting for the server response first.

What am I doing wrong?

Answer 1

I've had something similar happen when there was a large amount of javascript being loaded, or when there is an unrelated javascript error (usually but not always related to the large amount of javascript.