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

时间:2017-08-07 09:12:58

标签: c# jquery asp.net twitter-bootstrap

我有一个ASPX UI页面,其中有3个不同的选项卡逐个提交

三个标签如下:

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

我使用单个提交按钮提交所有3个标签(基于条件)

我想禁用div 2&中其他字段的验证3,当我在1 div中提交表格时。即在注册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中的文本字段,它会提供必要的字段验证错误。

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

我在codebehind .cs文件中有切换案例,根据该文件对提交的div执行操作。

注意:提到的文本框字段仅用于分类目的!

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

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

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

1 个答案:

答案 0 :(得分: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>