Click here to Skip to main content
15,891,976 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I Want to do client side validation for checkboxlist 'At least one check box selected' Inside the Radlistview on button click.

My code is
XML
<telerik:RadListView ID="RadListView1" runat="server">
           <ItemTemplate>
              <table>
                   <tr>
                       <td>
                            <asp:CheckBoxList RepeatDirection="Horizontal" CssClass="horizontalListbox" ID="Listbox_Permission" runat="server" >
                              <asp:ListItem Text="Apples" Value="1"></asp:ListItem>
                              <asp:ListItem Text="Oranges" Value="2"></asp:ListItem>
                             <asp:ListItem Text="Mangoes" Value="3"></asp:ListItem>
                           </asp:CheckBoxList>
                           <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Select one" ClientValidationFunction="cb_selectone" forecolor="Red"></asp:CustomValidator>
                       </td>
                   </tr>
              </table>
           </ItemTemplate>
           </telerik:RadListView>
           <br />
           <asp:Button runat="server" ID="Button1" Text="Submit" OnClick="OnButton1_Click" />
Posted

1 solution

Let's analyze...


When CheckBoxList is rendered in Browser, it will be a Table having many CheckBox inside one one td like...
XML
<table class="horizontalListbox" id="Listbox_Permission">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" value="1" name="Listbox_Permission$0" id="Listbox_Permission_0">
                <label for="Listbox_Permission_0">Apples</label>
            </td>
            <td>
                <input type="checkbox" value="2" name="Listbox_Permission$1" id="Listbox_Permission_1">
                <label for="Listbox_Permission_1">Oranges</label>
            </td>
            <td>
                <input type="checkbox" value="3" name="Listbox_Permission$2" id="Listbox_Permission_2">
                <label for="Listbox_Permission_2">Mangoes</label>
            </td>
        </tr>
    </tbody>
</table>

Now, let's add OnClientClick attribute to the Button to call a JavaScript function...
ASP.NET
<asp:Button runat="server" ID="Button1" Text="Submit" OnClick="OnButton1_Click" OnClientClick="return someJavaScriptFunction();" />

After that, it will render as...
HTML
<input type="submit" id="Button1" onclick="return someJavaScriptFunction();" value="Submit" name="Button1">

So, what's Next?


In that function, we will just try to fetch all the CheckBoxes and try to loop through each of them to see if anyone is checked or not. If checked, we will return true and show one alert.

JavaScript
function someJavaScriptFunction() {
    var isAnyCheckBoxChecked = false;

    // Let's get all the CheckBoxes inside the CheckBoxList
    var checkBoxes = document.getElementById("Listbox_Permission").getElementsByTagName("input");
    // For jsfiddle demo I have directly used the ID, otherwise you might have to use ClientID like below...
    // document.getElementById("<%= Listbox_Permission.ClientID %>").getElementsByTagName("input");

    // Now let's Loop through the Children.
    for (var i = 0; i < checkBoxes.length; i++) {
        if (checkBoxes[i].type == "checkbox") {
            if (checkBoxes[i].checked) {
                // If current CheckBox is checked, then return true.
                isAnyCheckBoxChecked = true;
                alert("Atleast one CheckBox is checked");
                break;
            }
        }
    }

    if (!isAnyCheckBoxChecked) {
        alert("No CheckBox is Checked.");
    }

    return isAnyCheckBoxChecked;
}

Please read the Comments inside code to know what is happening inside it.

Demo


Check the Demo. See how it is working. Customize it according to your requirements.

[Demo] CheckBoxList Validation in ASP.NET[^]
 
Share this answer
 
v3
Comments
Karthik_Mahalingam 15-Jan-14 9:05am    
5! Good.
Thanks a lot Karthik. :)
Karthik_Mahalingam 15-Jan-14 9:17am    
welcome <TD> :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900