How to validate if there is any item in a list box (RadListBox)?

Checking if any text field empty is relatively easy because we can use RequiredFieldValidator control as I mentioned in this post. However, the same control (RequiredFieldValidator) cannot be used for  a list box. You need to work a little more to validate item count in a list box.

Background

We have two list box in our page (I use a Telerik control, RadListBox). We want to check if the list on the right side (listCountryDestination) empty or not after clicking “Submit” button.

<telerik:RadListBox RenderMode="Lightweight" runat="server" ID="listCountrySource" Height="200px" Width="225px" AllowTransfer="true" TransferToID="listCountryDestination" ButtonSettings-AreaWidth="30px" SelectionMode="Multiple">
<ButtonSettings TransferButtons="All"></ButtonSettings>
<Items>
     <telerik:RadListBoxItem Text="Argentina"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Australia"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Brazil"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Canada"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Chile"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="China"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Egypt"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="England"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="France"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Germany"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="India"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Indonesia"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Kenya"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="Mexico"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="New Zealand"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="South Africa"></telerik:RadListBoxItem>
     <telerik:RadListBoxItem Text="USA"></telerik:RadListBoxItem>
</Items>
</telerik:RadListBox>
<telerik:RadListBox RenderMode="Lightweight" runat="server" ID="listCountryDestination" Height="200px" Width="195px">
</telerik:RadListBox>

Solution

You can use a CustomValidator and a JavaScript function to validate your list box. Add this CustomValidator below your list box:

<asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ClientValidationFunction="ValidationCriteria" ErrorMessage="Select at least 1 country"></asp:CustomValidator>

Add the code block below into your page (preferably after </html> tag).

<script type="text/javascript">
    function ValidationCriteria(source, args) {
        var listbox = $find('listCountryDestination');
        var check = 0;
        var items = listbox.get_items();
        var cnt = items.get_count();
        if (cnt)
            args.IsValid = true;
        else
            args.IsValid = false;
    }
</script>

Your page will show a warning if the list box is empty as seen in the screenshot below.