TabContainer incorrectly triggers validation when OnDemand is set to True RSS

• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 21, 2012 05:56 AM|LINK

  Hi,

  I am using the latest TabContainer control from the November 2011 AJAX Control Toolkit and I noticed that when the TabContainer's OnDemand property is set to True and the TabPanel contains a validator like a requiredfieldvalidator then the validator will be triggered when the tab is activated although the form has not been submitted. Does anybody know how to prevent this from happening? I only want the page to be validated when the button in the TabPanel is clicked and not when the tab is selected.

  You can recreate this issue using the following code:

  <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
          ondemand="True">
          <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
              <ContentTemplate>
                  <asp:TextBox ID="TextBox1" runat="server" style="margin-bottom: 0px"
                      ValidationGroup="Test"></asp:TextBox>
                  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                      ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"
                      ForeColor="Red" ValidationGroup="Test">*</asp:RequiredFieldValidator>
                  <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="Test" />
              </ContentTemplate>
          </asp:TabPanel>
      </asp:TabContainer>

• • Reply
  

  Shanthi.Gang...

  Member

  59 Points

  34 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 21, 2012 11:56 AM|LINK

  Use ValidationGroup and CausesValidation properties of a button control

  Shanthi Gangatharan,
  MCTS in Microsoft .NET Framework 3.5, ASP.NET Application Development
  Coimbatore, Tamil Nadu, India
• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 21, 2012 04:57 PM|LINK

  Hi Shanthi, as you can see in my first post, I am using ValidationGroup. The default value for CausesValidation is True and is therefore not showing in my example but is also used and yet it doesn't work properly.

• • Reply
  

  Song-Tian - ...

  All-Star

  43715 Points

  4304 Posts

  Microsoft

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 22, 2012 08:32 AM|LINK

  Hi,

  Please change your code as follow, and have a try:

  <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
          ondemand="True">
          <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
              <ContentTemplate>
                  <asp:TextBox ID="TextBox1" runat="server" style="margin-bottom: 0px"
                      ValidationGroup="Test"></asp:TextBox>
                  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                      ErrorMessage="*" ControlToValidate="TextBox1"
                      ForeColor="Red" Display="Dynamic" ValidationGroup="Test"></asp:RequiredFieldValidator>
                  <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="Test" />
              </ContentTemplate>
          </asp:TabPanel>
      </asp:TabContainer>

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 22, 2012 04:02 PM|LINK

  Hi, thank you for your response but it behaved the same and did not solve the problem. Are you able to replicate the problem?

• • Reply
  

  Song-Tian - ...

  All-Star

  43715 Points

  4304 Posts

  Microsoft

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 27, 2012 07:23 AM|LINK

  Hi,

  Please post some screenshot of the problem.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 28, 2012 04:01 AM|LINK

  Even better, go to http://www.ivertisement.com/Default4.aspx and click on TabPanel3. You will notice that the validator gets triggered by selecting TabPanel3 whereas it shouldn't, only the button on TabPanel3 should be triggering the validator. The code in my first post will allow you to recreate this problem. Does this help?

• • Reply
  

  Song-Tian - ...

  All-Star

  43715 Points

  4304 Posts

  Microsoft

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Feb 28, 2012 09:04 AM|LINK

  Hi,

  I am afraid this is a bug of Ajax Control Toolkit. You could report this to the IssueTracker of the CodePlex:http://www.codeplex.com/AjaxControlToolkit/WorkItem/AdvancedList.aspx .

  And you also may do that as follow:

  <div>
          <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
          </asp:ToolkitScriptManager>
          <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnDemand="true">
          <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
          </asp:TabPanel>
          <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
              <ContentTemplate>
                  
                  <asp:TextBox ID="TextBox1" runat="server" style="margin-bottom: 0px"></asp:TextBox>
                  <label id="flag" style="color:Red;display:none;">*</label>
                  <asp:Button ID="Button1" runat="server" OnClientClick="return Validated()" Text="Button" />
             </ContentTemplate>
          </asp:TabPanel>
      </asp:TabContainer>
      <script type="text/javascript">
  
  
          function isValidated() {
              if ($get('<%=TextBox1.ClientID %>').value == "")
                  return false;
              return true;
          }
  
          function Validated() {
              if (isValidated())
                  $get("flag").style.display = "none";
              else {
                  $get("flag").style.display = "inline";
                  return false;
              }
          }
      </script>
      </div>

   

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  • Marked as answer by Young Yang - MSFT on Feb 28, 2012 02:33 PM
• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Mar 01, 2012 03:52 AM|LINK

  Thanks, I reported the bug in the IssueTracker (http://ajaxcontroltoolkit.codeplex.com/workitem/27111) your solution indeed works but the code that I shared was just an example. The real page has about 10 validators of all different kinds, not just requiredfield validators. Recreating them by writing the JavaScript myself would simply be to much work so I guess I will just have to accept this problem for now until they fix the bug.

• • Reply
  

  dtromp

  Member

  78 Points

  116 Posts

  Re: TabContainer incorrectly triggers validation when OnDemand is set to True

  Mar 22, 2012 03:00 AM|LINK

  Here is an interesting observation, the ChangePassword control does not trigger the validation when used in TabPanel.

  When I compared the source code of the page that ASP.NET produced, I noticed that the only difference was the following line:

  <input name="__EVENTVALIDATION" id="__EVENTVALIDATION" type="hidden" value="/wEWDgLdz/eoCQLI562OBAKuzc5XApzqzYoOAuen4rwMAvaz25cHAvWGivQKAuCVwTsCwv78rAoCqOeagQwCjZK59ggCjpK59ggCi5K59ggCjJK59gibPPjhJy6n0N9j9OPkBn6ruj6yPw=="/>

  Try the following code to see for yourself.

  <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
          ondemand="True">
          <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1" OnDemandMode="Once">
          </asp:TabPanel>
          <asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2" OnDemandMode="Once">
              <ContentTemplate>
                  <asp:ChangePassword ID="ChangePassword1" runat="server">
                      <ChangePasswordTemplate>
                          <table cellpadding="1" cellspacing="0" style="border-collapse:collapse;">
                              <tr>
                                  <td>
                                      <table cellpadding="0">
                                          <tr>
                                              <td align="center" colspan="2">
                                                  Change Your Password</td>
                                          </tr>
                                          <tr>
                                              <td align="right">
                                                  <asp:Label ID="CurrentPasswordLabel" runat="server"
                                                      AssociatedControlID="CurrentPassword">Password:</asp:Label>
                                              </td>
                                              <td>
                                                  <asp:TextBox ID="CurrentPassword" runat="server" TextMode="Password"></asp:TextBox>
                                                  <asp:RequiredFieldValidator ID="CurrentPasswordRequired" runat="server"
                                                      ControlToValidate="CurrentPassword" ErrorMessage="Password is required."
                                                      ToolTip="Password is required." ValidationGroup="ChangePassword1">*</asp:RequiredFieldValidator>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td align="right">
                                                  <asp:Label ID="NewPasswordLabel" runat="server"
                                                      AssociatedControlID="NewPassword">New Password:</asp:Label>
                                              </td>
                                              <td>
                                                  <asp:TextBox ID="NewPassword" runat="server" TextMode="Password"></asp:TextBox>
                                                  <asp:RequiredFieldValidator ID="NewPasswordRequired" runat="server"
                                                      ControlToValidate="NewPassword" ErrorMessage="New Password is required."
                                                      ToolTip="New Password is required." ValidationGroup="ChangePassword1">*</asp:RequiredFieldValidator>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td align="right">
                                                  <asp:Label ID="ConfirmNewPasswordLabel" runat="server"
                                                      AssociatedControlID="ConfirmNewPassword">Confirm New Password:</asp:Label>
                                              </td>
                                              <td>
                                                  <asp:TextBox ID="ConfirmNewPassword" runat="server" TextMode="Password"></asp:TextBox>
                                                  <asp:RequiredFieldValidator ID="ConfirmNewPasswordRequired" runat="server"
                                                      ControlToValidate="ConfirmNewPassword"
                                                      ErrorMessage="Confirm New Password is required."
                                                      ToolTip="Confirm New Password is required." ValidationGroup="ChangePassword1">*</asp:RequiredFieldValidator>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td align="center" colspan="2">
                                                  <asp:CompareValidator ID="NewPasswordCompare" runat="server"
                                                      ControlToCompare="NewPassword" ControlToValidate="ConfirmNewPassword"
                                                      Display="Dynamic"
                                                      ErrorMessage="The Confirm New Password must match the New Password entry."
                                                      ValidationGroup="ChangePassword1"></asp:CompareValidator>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td align="center" colspan="2" style="color:Red;">
                                                  <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td align="right">
                                                  <asp:Button ID="ChangePasswordPushButton" runat="server"
                                                      CommandName="ChangePassword" Text="Change Password"
                                                      ValidationGroup="ChangePassword1" />
                                              </td>
                                              <td>
                                                  <asp:Button ID="CancelPushButton" runat="server" CausesValidation="False"
                                                      CommandName="Cancel" Text="Cancel" />
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                              </tr>
                          </table>
                      </ChangePasswordTemplate>
                  </asp:ChangePassword>
              </ContentTemplate>
          </asp:TabPanel>
      </asp:TabContainer>