Validate AJAX Combobox in ASP.NET using JavaScript

• Download ComboBoxValidation.zip

Introduction

In this article I will tell you how to validate AJAX ComboBox at client side using JavaScript and how to manage align dropdown list in a div having position attribute.

Background  

Recently while working on a project for my company, I met with a requirement in which I have to use AJAX ComboBox instead of DropDownList control of ASP.NET. Every thing work fine with using combobox until I started validating it for null values. So when I use asp requiredfield validator to check for null value in combobox it does not validate it. Then I try to debug it using developer tolls provided by chrome then I came to know how combobox is made up. Basically AJAX combobox is made up of three controls:

1.  TextBox  
2.  Button  
3.  ListBox  

Whenever we select an item from listbox its displays to us in textbox control. Initially listbox control is hidden and displays when we click button to provide dropdownlist effect.

Then I try to validate it using JavaScript and pass combobox clientid to JavaScript and check for its value, still I was not able to validate combobox as I was getting null value exception there.  

Then I started searching for some solution and after hours of searching for validating combobox I was not able to get any solution of validating combobox. 

I spent my couple of days in solving this issue and still I was not at any solution. So again I try to debug my code using chrome and started reading the HTML generated by combobox and I came up with an solution to somehow reach the textbox control of combobox.

After using some hit and trail method I got a solution in which I use following code: 

function validateCombobox() {
    var comboboxId = document.getElementById('<%=ComboBox1.ClientId%>_TextBox');
    if (comboboxId.value != null && comboboxId.value != "") {
        alert(comboboxId.value);
    }
    else {
        alert("null value");
    }
}

From the above code you can judge that I am trying to get the TextBox control of the combobox which is responsible to display the the selected value and also make same value available for further user code. 

However this method was not feasible enough as when I use it within the page inheriting masterpage then the HTML was different, you can verify it by viewing your source code in both the cases. So my function needs to be change as follows:

function validateCombobox() {
    var comboboxId = document.getElementById('<%=ComboBox1.ClientId%>_ComboBox1_TextBox');
    if (comboboxId.value != null && comboboxId.value != "") {
        alert(comboboxId.value);
    }
    else {
        alert("null value");
    }
}

And this is the real problem. I don't want to write two different functions performing same task so I came up with solution and use following code: 

function validateCombobox() {
    var id = document.getElementById('<%=ComboBox1.ClientID %>');
    var inputs = id.getElementsByTagName('input');
    var i;
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'text') {
            if (inputs[i].value != "" && inputs[i].value != null)
                alert(inputs[i].value);
            else
                alert("null value");

            break;
        }
    }
}

In the above code you can see that I am getting the control in JavaScript using its ClientID and then I find all the controls with TagName input present in that custom control. Now I run a loop to find the TextBox and compare its value whether its null or not.

Similarly you can check it for other values or task you want to do with ComboBox using JavaScript on client-side. 

After solving this I saw a new issue when is used it in a div having position attribute. I saw listbox is not below the textbox control of combobox. After searching I came to know that issue was the div containing combobox which contains position attribute, so when I remove position attribute all thing was working fine.

As combobox's listbox having inline stylesheet which contains position:absolute attribute.

But there was necessity of using position attribute in order to set my page layout and also there was no alternative given for this issue on internet.

So after using some hit and trail method I found that somehow if I can overwrite position attribute from absolute to fixed I can have my task done. We can use position:static for same purpose but by using position:static other controls on page move as list is displayed.

After seaching I found that combobox is having following inbuilt classes which we can overwrite:

1. .ajax__combobox_inputcontainer 
2. .ajax__combobox_textboxcontainer
3. .ajax__combobox_buttoncontainer
4. .ajax__combobox_itemlist

For this I have used following code:

.combo{
//your style 
     }
   .combo .ajax__combobox_itemlist{
   	position : static !important;
      }

In the above code I have made one class name combo along with which I have override position attributes of itemlist class provided with combobox control and assign this class to my combobox.

As we all knew that inline stylesheet has higher priority and omits all the attributes that contradicts the attributes present in inline stylesheet as they are applied at last and the last style attribute override the all previous matching attributes.

So I have used !important rule for position attribute which helps in overriding the inline style attributes of stylesheet by assigning the attribute in stylesheet higher priority on the basis of its importance.

Before ending the article I would like to show you some interesting results I got when I try to print the combobox value on screen and I got following output shown in attached image below and codes used to get values are mentioned in brackets:

This is my first article and hope this would help you in your similar issues with AJAX combobox. I searched for this kind of solution a lot but didn't get any success. So I decided to write this article.