asp：LinkBut​​ton - 驗證表單域

Question

我對C＃完全陌生，我試圖找出表單驗證。 更具體地說，我有一個webform（C＃），我已經將它分解爲「form-part-1」和「form-part-2」部分。

默認情況下，「form-part-2」被隱藏。一旦「form-part-1」中的所有字段完成後，您應該可以通過單擊「Continue」鏈接按鈕繼續進行「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 &丹尼爾的回饋。很有幫助！ 我得到的東西有一個例外。在我進入步驟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> 

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

然後用Diferent驗證摘要每個組。

也許你需要一個按鈕，每個驗證，但你可以做的伎倆，並使用多個驗證組相同的按鈕：

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

Answer 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(); 
    } 
});