如何根据条件为 3 个不同的 DIV 应用/删除 asp.net 所需的验证？

Posted 2023-04-13

【中文标题】如何根据条件为 3 个不同的 DIV 应用/删除 asp.net 所需的验证？

【英文标题】：How to apply/remove asp.net required validation for 3 different DIV based on condition?

【发布时间】：2018-01-14 13:06:47

【问题描述】：

我有一个 ASPX UI 页面，其中有 3 个不同的选项卡，它们被一个一个提交

三个选项卡如下：

标签 1- 注册 标签 2- 详细信息 标签 3- 联系我们

我正在使用单个提交按钮来提交所有 3 个选项卡（根据条件）

当我在 1 div 中提交表单时，我想禁用对 div 2 和 3 中其他字段的验证。即在注册 div 中，当我单击提交时，其他 2 个 div 不得给出验证错误。 & 提交其他 2 个 div 时相同。

<div id=mainDiv>
 <ul class="nav nav-tabs nav-justified" id="steps-lap">
   <li role="presentation" class="active" id="listOne" runat="server"><asp:HyperLink ID="tabOne" runat="server" NavigateUrl="#tab_one" data-toggle="tab">1: Basic Details</asp:HyperLink></li>
   <li role="presentation" id="listTwo" runat="server"><asp:HyperLink ID="tabTwo" runat="server" NavigateUrl="#tab_two" data-toggle="tab">2: Property Details</asp:HyperLink></li>
   <li role="presentation" id="listThree" runat="server"><asp:HyperLink ID="tabThree" runat="server" NavigateUrl="#tab_three" data-toggle="tab">3: Finish</asp:HyperLink></li>
 </ul>


<div class="tab-content" id="tab-content">

<!-- TAB-1 STARTS-->
<div class="tab-pane fade active in" role="tabpanel" id="tab_one" aria-labelledby="home-tab">
 <div id="registrationDetails">
  <asp:TextBox ID="txtFullName" runat="server" class="form-control input-md" placeholder="" TabIndex="1" onkeypress="return keyRestrictValidChars(event, 'abcdefghijklmnopqrstuvwxyz');"></asp:TextBox>
  <asp:RequiredFieldValidator CssClass="rfv-error" ID="RequiredFieldValidator5" runat="server" ErrorMessage="* required" SetFocusOnError="true" ControlToValidate="txtFullName" ValidationGroup="DetailsGroup"></asp:RequiredFieldValidator>

  <asp:TextBox ID="txtLastName" runat="server" class="form-control input-md" placeholder="" TabIndex="1" onkeypress="return keyRestrictValidChars(event, 'abcdefghijklmnopqrstuvwxyz');"></asp:TextBox>
  <asp:RequiredFieldValidator CssClass="rfv-error" ID="RequiredFieldValidator1" runat="server" ErrorMessage="* required" SetFocusOnError="true" ControlToValidate="txtFullName" ValidationGroup="DetailsGroup"></asp:RequiredFieldValidator>                                                    
 </div>
</div>
<!-- TAB-1 ENDS-->

<!-- TAB-2 STARTS-->
<div class="tab-pane fade" role="tabpanel" id="tab_two" aria-labelledby="dropdown2-tab">
   <div id="AllContent" runat="server" class="form-group" style="display:block;">
    <asp:TextBox ID="txtContact" runat="server" class="form-control input-md" placeholder="" TabIndex="1" onkeypress="return keyRestrictValidChars(event, 'abcdefghijklmnopqrstuvwxyz');"></asp:TextBox>
    <asp:RequiredFieldValidator CssClass="rfv-error" ID="RequiredFieldValidator5" runat="server" ErrorMessage="* required" SetFocusOnError="true" ControlToValidate="txtContact" ValidationGroup="DetailsGroup"></asp:RequiredFieldValidator>

    <asp:TextBox ID="txtEmail" runat="server" class="form-control input-md" placeholder="" TabIndex="1" onkeypress="return keyRestrictValidChars(event, 'abcdefghijklmnopqrstuvwxyz');"></asp:TextBox>
    <asp:RequiredFieldValidator CssClass="rfv-error" ID="RequiredFieldValidator1" runat="server" ErrorMessage="* required" SetFocusOnError="true" ControlToValidate="txtEmail" ValidationGroup="DetailsGroup"></asp:RequiredFieldValidator>
  </div>
</div>
<!-- TAB-2 ENDS-->

<!-- TAB-3 STARTS-->
<div class="tab-pane fade " role="tabpanel" id="tab_three" aria-labelledby="dropdown3-tab">
 <div id="CompletedContent">
 <asp:TextBox ID="txtEmail" runat="server" class="form-control input-md" placeholder="" TabIndex="1" onkeypress="return keyRestrictValidChars(event, 'abcdefghijklmnopqrstuvwxyz');"></asp:TextBox>
 <asp:RequiredFieldValidator CssClass="rfv-error" ID="RequiredFieldValidator1" runat="server" ErrorMessage="* required" SetFocusOnError="true" ControlToValidate="txtEmail" ValidationGroup="DetailsGroup"></asp:RequiredFieldValidator>
</div>
</div>
<!-- TAB-3 ENDS -->


<div class="input-group">
  <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Class="btn btn-default-color btn-sm" Text="Submit" CausesValidation="false" ValidationGroup="DetailsGroup"/>
</div>

</div>
</div>

如页面加载代码所示，当我提交第一个选项卡中的字段时，第一个选项卡将被激活，将移动到第二个选项卡，然后第二个选项卡中的字段将被填写并提交，第三个选项卡将被激活。

但是现在发生的事情是，当我提交第一个选项卡的详细信息时，由于其他两个 div 中的文本字段，它给出了必填字段验证错误。

有没有办法处理这种情况？？

我在代码隐藏 .cs 文件中有 switch case，将根据它对提交的 div 执行操作。

注意：提及的文本框字段仅用于分类目的！

我也可以限制用户在填满后返回上一个标签。

即当用户在第一个选项卡中填写数据时，它将转到第二个选项卡，第一个选项卡也将被禁用，用户无法转到第一个选项卡。

任何建议都会有所帮助。谢谢！！

【问题讨论】：

我建议使用 3 个不同的表单，每个选项卡作为一个表单，因此一次只能提交一个表单。

@amitwadhwani 在一个 aspx 页面中我们只能有 1 个表单标签！

【参考方案1】：

您可以为此使用 aspnet 验证器的 ValidationGroup 属性。

<div id="tab1">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
        ValidationGroup="tabgroup1" Display="Dynamic" runat="server"
        ErrorMessage="Tab 1 required"></asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button tab 1" ValidationGroup="tabgroup1" />
</div>

<div id="tab2">
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="TextBox2"
        ValidationGroup="tabgroup2" Display="Dynamic" runat="server"
        ErrorMessage="Tab 2 required"></asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="Button2" runat="server" Text="Button tab 2" ValidationGroup="tabgroup2" />
</div>

<div id="tab3">
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="TextBox3"
        ValidationGroup="tabgroup3" Display="Dynamic" runat="server"
        ErrorMessage="Tab 3 required"></asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="Button3" runat="server" Text="Button tab 3" ValidationGroup="tabgroup3" />
</div>

【讨论】：

请注意，我使用相同的按钮来提交每个标签的数据。在 switch case 后面的代码中，用于处理按钮如何为每个其他选项卡执行操作。

然后要么使用 3 个不同的按钮，要么创建一个可以处理多个选项卡的 CustomValidator。