ASP.NET Form Validation Doesn't work first time - asp.net

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

The load order of the JS files may be causing problems here, if there are dependencies between them. Because of random latency some dependencies might not have been satisfied yet, causing functionality to break. Your console might give hints if this is the case. On subsequent page loads everything appears to be fine, because the JS files were cached and are now loaded without latency in their proper order.
Things to try:
Play around with JS inclusion order
Try to postpone the use of
dependencies until after body.onload
fired.
You may also want to try out
the rather involved solution
offered on aspdotnetfaq.
Hope this helps.

Answer 2

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.

Answer 3

This may not be much of an answer, but Ive run into similar issues in the past. ASP Validation Controls dont really seem to "play nice" inside of UpdatePanels. I think the reason is that when they attempt to perform any type of validation, they also attempt to write to the pages viewstate. The viewstate however is outside of the Update Panel's area, meaning that you are update the "middle" of the page, without the entire page's state getting updated, making the status of your controls out of sync.
In any case, to prove this, remove the update panel from around your controls, submit your form, and check if your validation controls work.
Unfortunately, for a workaround, Ive created custom javascript functions to perform client side validation, and then also perform server side validation and display any errors. In these scenario's, Ive avoided using ASP .NET Validation controls.
Good luck =\