Tuesday, May 8, 2012

CheckBoxList client side validation using JQuery

---------------- <b>JQuery Code for two CheckBoxLists</b> --------------------
    <script type="text/javascript">
        $(function() {
            function checkBoxClicked() {
                //Get the total of selected CheckBoxes
                var n1 = $("#list1 input:checked").length;
                var n2 = $("#list2 input:checked").length;
                //Set the value of the txtCheckbox control
                $("input:#txtCheckbox").val(n1 == 0 ? "" : n1);
                $("input:#txtCheckbox2").val(n2 == 0 ? "" : n2);
            }

            //intercept any check box click event inside the #list Div
            $("#list1 :checkbox").click(checkBoxClicked);
            $("#list2 :checkbox").click(checkBoxClicked);
        });
    </script>
---------------------------------------------------------------------


 -------------------------- <b>HTML Code for Two CheckBoxLists</b> -----------------
             <tr>
                <td colspan="2">
                    <div id="list1">
                        <asp:CheckBoxList ID="chklHobbies" runat="server" ValidationGroup="testGroup" RepeatDirection="Vertical"
                            RepeatLayout="Table" RepeatColumns="3">
                            <asp:ListItem Text="Sport" Value="Sport" />
                            <asp:ListItem Text="Fishing" Value="Fishing" />
                            <asp:ListItem Text="Reading Books" Value="ReadingBooks" />
                            <asp:ListItem Text="Swimming" Value="Swimming" />
                            <asp:ListItem Text="Listening To Music" Value="ListiningToMusic" />
                        </asp:CheckBoxList>
                        <div style='display:none;'>
                            <asp:TextBox ID="txtCheckbox" runat="server" ValidationGroup="testGroup" />
                            <asp:RequiredFieldValidator ID="valCheckboxList" Display="None" ErrorMessage="At least one hobby value must be selected 1"
                                runat="server" ControlToValidate="txtCheckbox" ValidationGroup="testGroup" EnableClientScript="true">*</asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="list2">
                        <asp:CheckBoxList ID="chklHobbies2" runat="server" ValidationGroup="testGroup" RepeatDirection="Vertical"
                            RepeatLayout="Table" RepeatColumns="3">
                            <asp:ListItem Text="Sport" Value="Sport" />
                            <asp:ListItem Text="Fishing" Value="Fishing" />
                            <asp:ListItem Text="Reading Books" Value="ReadingBooks" />
                            <asp:ListItem Text="Swimming" Value="Swimming" />
                            <asp:ListItem Text="Listening To Music" Value="ListiningToMusic" />
                        </asp:CheckBoxList>
                        <div style='display:none;'>
                            <asp:TextBox ID="txtCheckbox2" runat="server" ValidationGroup="testGroup" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="None" ErrorMessage="At least one hobby value must be selected 2"
                                runat="server" ControlToValidate="txtCheckbox2" ValidationGroup="testGroup" EnableClientScript="true">*</asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
            </tr>

----------------------------------------------------------------------

No comments:

Post a Comment