asp:LinkButton - validate form field

Question

I am completely new to C# and I am trying to figure out form validation. More specifically, I have a webform (C#) that I've split into to parts "form-part-1" and "form-part-2".

By default "form-part-2" is hidden. Once all fields in "form-part-1" are completed, you should be able to proceed to "form-part-2" by clicking on the "Continue" linkButton.

The jQuery part works well, showing and hiding form sections as desired. But the validation is not enforced anymore.

I have validators in place but at this point I can proceed to "form-part-2" without filling out the "form-part-1" fields.

I would like the validation to be enforced before proceeding to "form-part-2".

Any tips and suggestions how to do it would be greatly appreciated.

Thanks in advance.

Here's my code:

    <script language="javascript" type="text/javascript">

    $(document).ready(function () {

            $("#continue").click(function (event) {
                $('#form-part-1').hide();
                $('#form-part-2').fadeIn();
            });

    });

</script>

<form id="SignUp" method="post" runat="server">

<table id="validation">
    <tr>
        <td colspan="2" vAlign="top">
        <asp:ValidationSummary ID="vsSignupValidation" runat="server"></asp:ValidationSummary></td>
    </tr>
</table>

<table id="form-part-2">
<tr>
    <td width="150">
            <label class="">
            <asp:label id="lblSignupFirstName" Runat="server">First Name:</asp:label>
            <span style="color:red">*</span>
            </label>
    </td>
    <td>
      <asp:TextBox size="30" CssClass="input" ID="txtSignupFirstName" TabIndex="1" runat="server"></asp:TextBox>
    </td>
</tr>
<tr>
    <td width="150">
            <label class="">
            <asp:label id="lblSignupLastName" Runat="server">Last Name:</asp:label>
            <span style="color:red">*</span>
            </label>
    </td>
    <td>
      <asp:TextBox size="30" CssClass="input" ID="txtSignupLastName" TabIndex="1" runat="server"></asp:TextBox>
    </td>
</tr>
</table>

<!-- validate and continue -->
    <asp:LinkButton ID="continue" runat="server"  onclientclick="return false;">Continue</asp:LinkButton>
<!-- validate and continue -->

<table id="form-part-1">
<tr>
    <td width="150">
            <label class="">
            <asp:label id="lblSignupUserID" Runat="server">UserID:</asp:label>
            <span style="color:red">*</span>
            </label>
    </td>
    <td>
      <asp:TextBox size="30" CssClass="input" ID="txtSignupUserID" TabIndex="1" runat="server"></asp:TextBox>
    </td>
</tr>
<tr>
    <td width="150">
        <label class="">
            <asp:label id="lblSignupPassword" Runat="server">Last Name:</asp:label>
            <span style="color:red">*</span>
        </label>
    </td>
    <td>
      <asp:TextBox size="30" CssClass="input" ID="txtSignupPassword" TabIndex="1" runat="server"></asp:TextBox>
    </td>
</tr>
<tr>
    <td width="150">
        <label class="">
            <asp:Label class="formtxtsm" ID="lblSignupConfirmPassword" runat="server">Confirm password</asp:Label>
            <span style="color:red">*</span>
        </label></td>
    <td>
        <asp:TextBox size="30" ID="txtSignupConfirmPassword" TabIndex="10" runat="server" TextMode="Password" CssClass="input"></asp:TextBox>
    </td>
</tr>
</table>

<!-- validators -->
<asp:requiredfieldvalidator id="rfvSignupFirstName" runat="server" Display="None" ControlToValidate="txtSignupFirstName" class="formerrortxt" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupLastName" runat="server" Display="None" ControlToValidate="txtSignupLastName" class="formerrortxt" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:RequiredFieldValidator ID="rfvSignupUserID" runat="server" Display="None" ControlToValidate="txtSignupUserID" ErrorMessage='"Username" is required.'></asp:RequiredFieldValidator>
<asp:requiredfieldvalidator id="rfvSignupPassword" runat="server" Display="None" ControlToValidate="txtSignupPassword" ErrorMessage='"Password" is required.'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupConfirmPassword" runat="server" Display="None" ControlToValidate="txtSignupConfirmPassword" ErrorMessage='"Confirm password" is required.'></asp:requiredfieldvalidator>
<asp:customvalidator id="cvSignupPasswordMatch" runat="server" Display="None" ErrorMessage='"Password" and "Confirm password" must match exactly.'></asp:customvalidator>
</form>

**** EDIT:

Thanks Phx & Daniel for your feedback. Very helpful! I got things working with one exception. The "form-part-2" fields get validated before I even get to the step 2. Any tips how to validate the username / password fields only after I get to the "form-part-2"? Thanks in advance!

here's my most recent version: www.smithy.somee.com

and the code:

<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

As you wrote: I would like the validation to be enforced before proceeding to "form-part-2".

You need to create validations groups in order to validate first N fields and the another N Fields. So create Validation groups for your controls:

http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx

<asp:textbox id="AgeTextBox" 
      runat="Server">
    </asp:textbox>

<asp:requiredfieldvalidator id="RequiredFieldValidator2"
      controltovalidate="AgeTextBox"
      validationgroup="PersonalInfoGroup"
      errormessage="Enter your age."
      runat="Server">
    </asp:requiredfieldvalidator>

<!--When Button1 is clicked, only validation
    controls that are a part of PersonalInfoGroup
    are validated.-->
    <asp:button id="Button1" 
      text="Validate" 
      causesvalidation="true"
      validationgroup="PersonalInfoGroup"
      runat="Server" />



<asp:textbox id="CityTextBox" 
      runat="Server">
    </asp:textbox>


    <asp:requiredfieldvalidator id="RequiredFieldValidator3"
      controltovalidate="CityTextBox"
      validationgroup="LocationInfoGroup"
      errormessage="Enter a city name."
      runat="Server">
    </asp:requiredfieldvalidator>



    <!--When Button2 is clicked, only validation
    controls that are a part of LocationInfoGroup
    are validated.-->
    <asp:button id="Button2" 
      text="Validate" 
      causesvalidation="true"
      validationgroup="LocationInfoGroup"
      runat="Server" />

Then use a Diferent validation summary for each group.

Perhaps you need a button for each validation but you can do the trick and use the same button for multiple validation groups:

http://www.aspsnippets.com/Articles/Validate-Multiple-Validation-Groups-with-one-Button-in-ASPNet.aspx

Another example here http://www.codeproject.com/Tips/401611/Validate-multiple-Validation-group-both-client-and

Answer 2

Phx gives a partial answer. Use his suggestion to create ValidationGroups. Put all your validators in part 1 and part 2 in separate groups.

JQuery does not automatically trigger validation.

You need to call the validation manually with your JavaScript. This can be done by calling Page_ClientValidate which will validate all validators for the passed ValidationGroup.

For example:

$("#continue").click(function (event) {
   if (Page_ClientValidate("group1")) {
      $('#form-part-1').hide();
      $('#form-part-2').fadeIn();
   }
});