合并表时导致ASP.NET的验证控件丢失

问题描述
在.NET页面中有2个表格,一个的ID为tbHeader,一个为tbForm
tbHeader 为表头文件,在tbForm中插入一个输入框控件和一个数据验证控件,然后通过JS脚本将2个表格合并起来.问题点,不添加合并脚本数据验证控件能正常检测输入框是否空值,合并后验证控件无法正常检测输入框是否空值.
报错为"'RequiredFieldValidator2' 为空或不是对象".
困惑的是查看输出页面的源文件数据验证控件也有合并进去.明明有'RequiredFieldValidator2' 这个ID的span,但是JS脚本就是无法检测到.后面附带JS合并表格的关键代码,C#的网页代码和生成页面输出的源代码.合并表格的关键JS脚本如下
<script type="text/javascript" id="GridView">
    function MergeTable(source, dest) {
        var row;
        var cell;
        var sourceTb = document.all(source);
        var destTb = document.all(dest);
        for (var i = 0; i < sourceTb.rows.length; i++) {
            row = document.createElement("TR");
            for (var j = 0; j < sourceTb.rows(i).cells.length; j++) {
                cell = document.createElement("TD");
                row.appendChild(cell);
                //复制对象
                for (k = 0; k < sourceTb.rows(i).cells(j).all.length; k++)
                    cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));            }
            destTb.tBodies(0).appendChild(row);
        }
        for (var i = sourceTb.rows.length - 1; i >= 0; i--) {
            sourceTb.deleteRow(i)
        }
    }    function ChangeTableLayout() {
        if (document.all('tbHeader') == null)
            MergeTable('tbForm', '');
        else
            MergeTable('tbForm', 'tbHeader');
    }    ChangeTableLayout();</script>    
C# ASPX代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %><!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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>
    
        <table id="tbHeader" style="width:100%;">
            <tr>
                <td>
                    test</td>
                <td>
                    test2</td>
                <td>
                    test3</td>
            </tr>
        </table>
    
    </div>
<table id="tbForm" style="width:100%;">
    <tr>
        <td>
            a<asp:TextBox ID="TextBox2" runat="server" ValidationGroup="11"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                ControlToValidate="TextBox2" ErrorMessage="aa" ValidationGroup="11"></asp:RequiredFieldValidator>
        </td>
        <td>
            a<asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup="11" />
        </td>
        <td>
            aaa</td>
    </tr>
</table>
    <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="22"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="TextBox1" ErrorMessage="bb" ValidationGroup="22"></asp:RequiredFieldValidator>
    <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="22" />
<script type="text/javascript" id="GridView">
    function MergeTable(source, dest) {
        var row;
        var cell;
        var sourceTb = document.all(source);
        var destTb = document.all(dest);
        for (var i = 0; i < sourceTb.rows.length; i++) {
            row = document.createElement("TR");
            for (var j = 0; j < sourceTb.rows(i).cells.length; j++) {
                cell = document.createElement("TD");
                row.appendChild(cell);
                //复制对象
                for (k = 0; k < sourceTb.rows(i).cells(j).all.length; k++)
                    cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));            }
            destTb.tBodies(0).appendChild(row);
        }
        for (var i = sourceTb.rows.length - 1; i >= 0; i--) {
            sourceTb.deleteRow(i)
        }
    }    function ChangeTableLayout() {
        if (document.all('tbHeader') == null)
            MergeTable('tbForm', '');
        else
            MergeTable('tbForm', 'tbHeader');
    }    ChangeTableLayout();</script>    
    </form>
</body>
</html>网页输出源文件<!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><title>
无标题页
</title></head>
<body>
    <form name="form1" method="post" action="test.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjkwNTQ4NTAxZGS0CxRHGR8wKqiFyM217GAsRYcg6g==" />
</div><script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
<script src="/tool_management/WebResource.axd?d=R_7TMFam8FszGHFy1W_oaw2&amp;t=633886943289445181" type="text/javascript"></script>
<script src="/tool_management/WebResource.axd?d=cofre_k955cVVWbdii-NwBKbQltWf6YVmFEh_Cn7sUw1&amp;t=633886943289445181" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script><div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKeoqrSDALs0fbZDAK7q7GGCALs0bLrBgKM54rGBsIv55ljAIVv3ND0hO04dP3oEkDu" />
</div>
    
    <div>
    
        <table id="tbHeader" style="width:100%;">
            <tr>
                <td>
                    test</td>
                <td>
                    test2</td>
                <td>
                    test3</td>
            </tr>
        </table>
    
    </div>
<table id="tbForm" style="width:100%;">
    <tr>
        <td>
            a<input name="TextBox2" type="text" id="TextBox2" />
            <span id="RequiredFieldValidator2" style="color:Red;visibility:hidden;">aa</span>
        </td>
        <td>
            a<input type="submit" name="Button2" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button2&quot;, &quot;&quot;, true, &quot;11&quot;, &quot;&quot;, false, false))" id="Button2" />
        </td>
        <td>
            aaa</td>
    </tr>
</table>
    <input name="TextBox1" type="text" id="TextBox1" />
    <span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">bb</span>
    <input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;22&quot;, &quot;&quot;, false, false))" id="Button1" />
<script type="text/javascript" id="GridView">
    function MergeTable(source, dest) {
        var row;
        var cell;
        var sourceTb = document.all(source);
        var destTb = document.all(dest);
        for (var i = 0; i < sourceTb.rows.length; i++) {
            row = document.createElement("TR");
            for (var j = 0; j < sourceTb.rows(i).cells.length; j++) {
                cell = document.createElement("TD");
                row.appendChild(cell);
                //复制对象
                for (k = 0; k < sourceTb.rows(i).cells(j).all.length; k++)
                    cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));            }
            destTb.tBodies(0).appendChild(row);
        }
        for (var i = sourceTb.rows.length - 1; i >= 0; i--) {
            sourceTb.deleteRow(i)
        }
    }    function ChangeTableLayout() {
        if (document.all('tbHeader') == null)
            MergeTable('tbForm', 'GridView_Site');
        else
            MergeTable('tbForm', 'tbHeader');
    }    ChangeTableLayout();</script>    
    
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("RequiredFieldValidator2"), document.getElementById("RequiredFieldValidator1"));
//]]>
</script><script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator2 = document.all ? document.all["RequiredFieldValidator2"] : document.getElementById("RequiredFieldValidator2");
RequiredFieldValidator2.controltovalidate = "TextBox2";
RequiredFieldValidator2.errormessage = "aa";
RequiredFieldValidator2.validationGroup = "11";
RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator2.initialvalue = "";
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.errormessage = "bb";
RequiredFieldValidator1.validationGroup = "22";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>
</body>
</html>