asp:LinkBut​​ton - 验证表单字段

时间:2014-05-06 14:11:45

标签: c# jquery asp.net forms validation

我是C#的新手,我正在尝试找出表单验证。 更具体地说,我有一个webform(C#),我将其拆分为“form-part-1”和“form-part-2”部分。

默认情况下,“form-part-2”被隐藏。完成“form-part-1”中的所有字段后,您应该可以通过单击“Continue”linkBut​​ton继续“form-part-2”。

jQuery部分运行良好,根据需要显示和隐藏表单部分。 但验证不再强制执行。

我有验证器,但此时我可以进入“form-part-2”而不填写“form-part-1”字段。

我希望在继续“form-part-2”之前执行验证。

如果有任何提示和建议,将不胜感激。

提前致谢。

这是我的代码:

    <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>

**** 编辑:

谢谢Phx&amp;丹尼尔的反馈意见。很有帮助! 我有一个例外工作。在我进入第2步之前,“form-part-2”字段得到验证。任何提示如何在我到达“form-part-2”之后验证用户名/密码字段?提前谢谢!

这是我最近的版本: 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>

2 个答案:

答案 0 :(得分:1)

正如您所写:我希望在继续执行&#34; form-part-2&#34; 之前执行验证。

您需要创建验证组才能验证前N个字段和另外N个字段。 因此,为您的控件创建验证组:

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" />

然后为每个组使用不同的验证摘要。

也许您需要一个按钮用于每个验证,但您可以使用相同的按钮进行多个验证组:

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

这里的另一个例子 http://www.codeproject.com/Tips/401611/Validate-multiple-Validation-group-both-client-and

答案 1 :(得分:1)

Phx给出了部分答案。使用他的建议来创建ValidationGroups。将第1部分和第2部分中的所有验证器放在不同的组中。

JQuery不会自动触发验证。

您需要使用JavaScript手动调用验证。这可以通过调用Page_ClientValidate来完成,$("#continue").click(function (event) { if (Page_ClientValidate("group1")) { $('#form-part-1').hide(); $('#form-part-2').fadeIn(); } }); 将验证传递的ValidationGroup的所有验证器。

例如:

{{1}}