Solved: AJAX ValidatorCalloutExtender causes "Error on Page" message when extended control is hidden

I have an ASP.NET project that throws that neat little " ! Error on Page " icon in the lower left corner of the browser under certain conditions.

If a TextBox has a ValidatorCalloutExtender attached to it AND
The TextBox is hidden AND
The TextBox would cause the Validator to fire on postback
THEN
That little Error on Page shows up

I'm pretty new to AJAX, can someone tell me how to handle this. It doesn't hurt functionallity, but it hurts the trust level my clients have in my app. I've attach a sample ASP.NET page that throws the error conditionally. ASP.NET is listed first in the snipped, then the C# code behind.

Thanks.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
 
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr runat="server" id="tr_field1">
                  <td>
                    #1&nbsp;&nbsp;
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                  </td>
                </tr>
                <tr runat="server" id="tr_field2">
                  <td>
                    #2&nbsp;&nbsp;
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>
                    <asp:Button ID="btnPostBack" runat="server" Text="Cause Postback" 
                      onclick="btnPostBack_Click" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="btnHide1" runat="server" Text="Hide 1" 
                      onclick="btnHide1_Click" CausesValidation="false"/>
                    <asp:Button ID="btnHide2" runat="server" Text="Hide 2" 
                      onclick="btnHide2_Click" CausesValidation="false"/>
                    <asp:Button ID="btnShowAll" runat="server" Text="Show All" 
                      CausesValidation="false" onclick="btnShowAll_Click"/>
                  </td>
                </tr>
              </table>
            
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  Wait up you pushy bastard
                </ProgressTemplate>
              </asp:UpdateProgress>
              
              <asp:RequiredFieldValidator ID="rfTextBox1" 
                runat="server" 
                ErrorMessage="<b>Required Field</b><br />Please Provide a Value" 
                Display="None"
                ControlToValidate="TextBox1" />
              <ajaxToolkit:ValidatorCalloutExtender ID="rfTextBox1E" runat="server" 
                TargetControlID="rfTextBox1"
                HighlightCssClass="validatorCalloutHighlight" />
                
              <asp:RequiredFieldValidator ID="rfTextBox2" 
                runat="server" 
                ErrorMessage="<b>Required Field</b><br />Please Provide a Value" 
                Display="None"
                ControlToValidate="TextBox2" />
              <ajaxToolkit:ValidatorCalloutExtender ID="rfTextBox2E" runat="server" 
                TargetControlID="rfTextBox2"
                HighlightCssClass="validatorCalloutHighlight" />
              
            </ContentTemplate>          
          </asp:UpdatePanel>
 
        </div>
    </form>
</body>
</html>
 
 
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
 
public partial class _Default : System.Web.UI.Page
{
  //=========================================================
  // Page_Load()
  //=========================================================
  protected void Page_Load(object sender, EventArgs e)
  {
 
  }
 
  //=========================================================
  // btnPostBack_Click()
  //=========================================================
  protected void btnPostBack_Click(object sender, EventArgs e)
  {
 
  }
 
  //=========================================================
  // btnHide1_Click()
  //=========================================================
  protected void btnHide1_Click(object sender, EventArgs e)
  {
    tr_field1.Visible = false;
  }
 
  //=========================================================
  // btnHide2_Click()
  //=========================================================
  protected void btnHide2_Click(object sender, EventArgs e)
  {
    tr_field2.Visible = false;
  }
 
  //=========================================================
  // btnShowAll_Click()
  //=========================================================
  protected void btnShowAll_Click(object sender, EventArgs e)
  {
    tr_field1.Visible = true;
    tr_field2.Visible = true;
  }
}

Open in new window

AJAX ValidatorCalloutExtender causes &quot;Error on Page&quot; message when extended control is hidden

AJAX ValidatorCalloutExtender causes "Error on Page" message when extended control is hidden