Я совершенно не знаком с C # и пытаюсь разобраться с проверкой формы. В частности, у меня есть веб-форма (C #), которую я разделил на части «форма-часть-1» и «форма-часть-2».

По умолчанию "форма-часть-2" скрыта. После того, как все поля в «form-part-1» будут заполнены, вы сможете перейти к «form-part-2», нажав на кнопку «Продолжить».

Часть jQuery работает хорошо, показывая и скрывая разделы формы по желанию. Но проверка больше не проводится.

У меня есть валидаторы, но теперь я могу перейти к «form-part-2», не заполняя поля «form-part-1».

Я хотел бы, чтобы проверка была проведена, прежде чем переходить к «форме-части-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 за ваш отзыв. Очень полезно! У меня все работает, за одним исключением. Поля «form-part-2» проверяются еще до того, как я перейду к шагу 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>
0
user3437783 6 Май 2014 в 18:11

2 ответа

Лучший ответ

Как вы писали: Я бы хотел, чтобы проверка была проведена перед переходом к "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

1
Jaime García Pérez 6 Май 2014 в 15:02

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();
   }
});
1
Daniel 6 Май 2014 в 14:57