I have dynamic tab Panels. And if no controls are selected in any particular tab. I need the header text of the Tab panel to turn red. I am doing a validation.

And help is appreciated.

  <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">

            <ajaxToolkit:TabPanel ID="TabPanel1"  HeaderText="tab 1" ClientIDMode="Static" runat="server">

                <ContentTemplate>

                    <asp:CheckBox ID="chk1" runat="server" />

                    <asp:CheckBox ID="chk2" runat="server" />

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="tab 2" ClientIDMode="Static" runat="server">

                <ContentTemplate>

                    <asp:CheckBox ID="CheckBox1" runat="server" />

                    <asp:CheckBox ID="CheckBox2" runat="server" />

                    <asp:CheckBox ID="CheckBox3" runat="server" />

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel3" HeaderText="tab 3" ClientIDMode="Static" runat="server">

                <ContentTemplate>

                    <asp:RadioButton ID="rbt1" ClientIDMode="Static" runat="server" />

                    <asp:RadioButton ID="rbt2" ClientIDMode="Static" runat="server" />

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel4" ClientIDMode="Static" HeaderText="tab 4" runat="server">

                <ContentTemplate>

                    <asp:RadioButton ID="rbt5" ClientIDMode="Static" runat="server" />

                    <asp:RadioButton ID="rbt6" ClientIDMode="Static" runat="server" />

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>

I got some help in doing the validation.

Now I need to turn the Header text.

<script>

    function IterateTabs() {

        var checkboxischecked = false;

        var radiobuttonisselected = false;

        $(".ajax__tab_panel").each(function () {

            var cb = $(this).find(":checkbox").length;

            var cbn = $(this).find(":checkbox:checked").length;

            if (cb > 0 && cbn > 0) {

                checkboxischecked = true;

            }

            var rd = $(this).find(":radio").length;

            var rdn = $(this).find(":radio:checked").length;

            if (rd > 0 && rdn > 0) {

                radiobuttonisselected = true;

            }

        });

        if (!checkboxischecked) {

            alert("please check a checkbox");

        }

        if (!radiobuttonisselected) {

            alert("please check a radiobutton");

        }

    }

</script>