ASP.NET form validation triggered too soon

Question

I have a two-step form that I set up with validation on the fields. The validation for the first two fields (first name / last name) works as desired. However the last two fields (user/password) get validated two soon. I would like the user / password fields to get validate only on "submit button" click... Here's a working example and my code. www.smithy.somee.com

<script language="javascript" type="text/javascript">
$(document).ready(function () {            
if (Page_ClientValidate("personalGroup")) {
    $('#form-part-1').hide();
    $('#form-part-2').fadeIn();
}            
if (Page_ClientValidate("accountGroup")) {                    
    $('#form-part-2').hide();
}
});
</script>

<form id="signup" runat="server">
<div>

    <table id="validators">
        <tr>               
            <td>
                <asp:ValidationSummary ID="personalGroupSummary" runat="server" ValidationGroup="personalGroup" />
                <asp:ValidationSummary ID="accountGroupSummary" runat="server"  ValidationGroup="accountGroup" />
            </td>
        </tr>
    </table>

    <table id="form-part-1">
        <tr>
            <td>First Name:</td>
            <td><asp:TextBox ID="txtFname" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><asp:TextBox ID="txtLname" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td></td>
            <td>                       
                <asp:Button ID="continue" runat="server" causesvalidation="true" validationgroup="personalGroup"  Text="Continue"  />
            </td>
        </tr>
    </table>


    <table id="form-part-2">
        <tr>
            <td>Username:</td>
            <td><asp:TextBox ID="txtUser" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><asp:TextBox ID="txtPass" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td></td>
            <td>                                      
                <asp:Button ID="btnSubmit" runat="server" validationgroup="accountGroup" Text="Submit" OnClick="btnSubmit_Click" />
            </td>
        </tr>
    </table>

    <!-- output -->
    <table>
        <tr>
            <td>First: </td>
            <td><asp:Label ID="lblFname" runat="server" Text=""></asp:Label></td>
        </tr>
        <tr>
            <td>Last:</td>
            <td><asp:Label ID="lblLname" runat="server" Text=""></asp:Label></td>
        </tr>
        <tr>
            <td>User:</td>
            <td><asp:Label ID="lblUser" runat="server" Text=""></asp:Label></td>
        </tr>
        <tr>
            <td>Pass:</td>
            <td><asp:Label ID="lblPass" runat="server" Text=""></asp:Label></td>
        </tr>
    </table>
</div>

    <!-- validators -->

        <asp:requiredfieldvalidator id="fvFname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtFname" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
        <asp:requiredfieldvalidator id="fvLname" runat="server" validationgroup="personalGroup"  Display="None" ControlToValidate="txtLname" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
        <asp:requiredfieldvalidator id="fvUser" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtUser" ErrorMessage='"Username" is required'></asp:requiredfieldvalidator>
        <asp:requiredfieldvalidator id="fvPass" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtPass" ErrorMessage='"Password" is required'></asp:requiredfieldvalidator>

    <!-- validators -->
</form>

Answer 1

try adding EnableClientScript="False" to your validators

 <asp:requiredfieldvalidator id="fvFname" runat="server" 
                             EnableClientScript="False"
                             validationgroup="personalGroup" Display="None"
                             ControlToValidate="txtFname" 
                             ErrorMessage='"First Name" is required'>
</asp:requiredfieldvalidator>

Answer 2

It turns out that Panel controls is the answer to my issue. I found a solution on this website. (compliments of Doug Seven). Built it and tested and works like a charm.

http://devproconnections.com/database-development/create-multistep-forms