New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Validate Combobox by Value

RadComboBox can be easily validated against the Text of its items. This is by design.

The control cannot be validated by value out of the box. The combobox is a composite control, its input area being essentially a <input type"text" ...> DOM element. The .value property of this DOM element corresponds to the actual text being written inside the textbox. This is not the case with <asp:dropdownlist> which corresponds to DOM <select> element and a number of <option> elements of ListItems which have different value / text properties.

Here is an example of how to validate the combobox by value.

Assume we have a combobox with some items. Some of the items have values, other does not. Some of the values are strings, other are numbers.

The goal is to allow form submission only if the value of the selected item is an even number.

<telerik:radcombobox 
    id="RadComboBox1" 
    allowcustomtext="true" 
    runat="server">    
    <Items>        
        <telerik:RadComboBoxItem runat="server" Text="-- Select item --" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with No Value" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with Value=1" Value="1" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with Value=2" Value="2" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with Value=3" Value="3" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with Value=4" Value="4" />        
        <telerik:RadComboBoxItem runat="server" Text="Item with Value=string" Value="string" />    
    </Items>
</telerik:radcombobox>

We will validate the combobox client-side and server-side by using CustomValidator control:

<asp:CustomValidator 
    ID="CustomValidator1" 
    runat="server" 
    ClientValidationFunction="validateCombo"
    ErrorMessage="You must select an item with even value" 
    OnServerValidate="CustomValidator1_ServerValidate">
</asp:CustomValidator>

Here is the javascript validation function:


function validateCombo(source, args) 
{
    args.IsValid = false;
    var combo = $find("<%= RadComboBox1.ClientID %>");
    var text = combo.get_text();
    if (text.length < 1) 
    {
        args.IsValid = false;
    }
    else 
    {
        var node = combo.findItemByText(text);
        if (node) 
        {
            var value = node.get_value();
            if (value.length > 0 && value % 2 == 0) 
            {
                args.IsValid = true;
            }
        }
        else 
        {
            args.IsValid = false;
        }
    } 
}

Here is the server-side validation:

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
   string selectedValue = RadComboBox1.SelectedValue;
   if (selectedValue != null && selectedValue.Length > 0)
   {
       try
       {
           int value = Convert.ToInt32(selectedValue);
           if (value % 2 == 0)
               args.IsValid = true;
           else
               args.IsValid = false;
       }
       catch (Exception ex)
       {
           args.IsValid = false;
       }            
   }
   else
       args.IsValid = false;
} 
In this article