locked
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. RRS feed

  • Question

  • User-1202100973 posted

    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>

     

     

    Thursday, April 7, 2016 3:41 AM

Answers

  • User-271186128 posted

    Hi Aditya_ven,

    I suggest you could modify your code as below:

        <script type="text/javascript">
            $(function () {
                $("#btnValidate").click(function () {
                    IterateTabs();
                });
            });
            function IterateTabs() {
                var checkboxischecked = false;
                var radiobuttonisselected = false;
                $(".ajax__tab_panel").each(function (index, value) {
                    //alert("Hello");
                    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 (cbn == 0 && rdn == 0) {
                        //according to the index to find the header, then add css style
                        $(".ajax__tab_tab").eq(index).find("span").css("background-color", "red");
                    }
                    else {
                        $(".ajax__tab_tab").eq(index).find("span").css("background-color", "");
                    }
    
                });
    
                if (!checkboxischecked) {
                    alert("please check a checkbox");
                }
    
                if (!radiobuttonisselected) {
                    alert("please check a radiobutton");
                }
            }
        </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 7, 2016 10:16 AM

All replies

  • User-271186128 posted

    Hi Aditya_ven,

    I suggest you could modify your code as below:

        <script type="text/javascript">
            $(function () {
                $("#btnValidate").click(function () {
                    IterateTabs();
                });
            });
            function IterateTabs() {
                var checkboxischecked = false;
                var radiobuttonisselected = false;
                $(".ajax__tab_panel").each(function (index, value) {
                    //alert("Hello");
                    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 (cbn == 0 && rdn == 0) {
                        //according to the index to find the header, then add css style
                        $(".ajax__tab_tab").eq(index).find("span").css("background-color", "red");
                    }
                    else {
                        $(".ajax__tab_tab").eq(index).find("span").css("background-color", "");
                    }
    
                });
    
                if (!checkboxischecked) {
                    alert("please check a checkbox");
                }
    
                if (!radiobuttonisselected) {
                    alert("please check a radiobutton");
                }
            }
        </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 7, 2016 10:16 AM
  • User-1202100973 posted

    Thank you Zhi LV.

    This is what Exactly I am looking for.

    Thank you for all the Help.

    Friday, April 8, 2016 1:57 PM