asp:LinkButton - 验证表单域答案

【问题标题】：asp:LinkButton - validate form fieldasp:LinkButton - 验证表单域
【发布时间】：2014-05-06 14:11:44
【问题描述】：

我对 C# 完全陌生，我正在尝试弄清楚表单验证。更具体地说，我有一个网络表单 (C#)，我已将其拆分为“form-part-1”和“form-part-2”部分。

默认情况下“form-part-2”是隐藏的。填写完“form-part-1”中的所有字段后，您应该可以通过单击“继续”链接按钮进入“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 和 Daniel 的反馈。非常有帮助！我有一个例外。在我进入第 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>

【问题讨论】：

自从我上次使用 asp.net 进行表单验证以来已经很久了，但它可能与客户端验证有关，验证器有类似 dynamic 或用于启用它验证客户端的东西一面，因为由于您使用的是 jQuery，显然您正在使用客户端导航，因此 asp.net 还不知道要验证，因为表单没有发布。

标签： c# jquery asp.net forms validation

【解决方案1】：

正如您所写：我希望在继续“form-part-2”之前执行验证。

您需要创建验证组以验证前 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

【讨论】：

如果您包含第一个链接中的一些代码，这个答案会更好。比如 validatePage 方法，这是绝对必要的。
已编辑。谢谢你的建议！！
非常感谢您的指导。知道如何仅在表单的“form-part-2”上触发用户和密码字段验证吗？谢谢！
Daniel Cook 编写了验证组的方法。检查他的答案。

【解决方案2】：

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

JQuery 不会自动触发验证。

您需要使用 JavaScript 手动调用验证。这可以通过调用 Page_ClientValidate 来完成，这将验证传递的 ValidationGroup 的所有验证器。

例如：

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

【讨论】：