Example to Validate DropDownList using jQuery in asp.net

Introduction: In previous articles i explained How to implement Jquery form validations in asp.net and Example to validate asp.net CheckBoxList using jQuery and jQuery to validate file extension and upload image file in asp.net and jQuery stylish dropdown menu example like Facebook,Linkedin and jQuery to Validate email address using RegularExpression and Create drop down menu for login and signup using jQuery and CSS and How to fill dropdownlist with days, month and year  and  How to validate file extension while uploading image or file through File Upload control  and How to read DataKeyName from GridView on SelectedindexChanging event of GridView
In this article i have explained how to validate dropdownlist using jQuery.

    validate asp.net dropdownlist control using jQuery 

Description: If  you click on the Submit button without selecting any department then it will show alert/message "Please select Department" otherwise it will show the selected department in the alert box/message box.
Notice i have binded the DropDownList with some static list items.You can also bind DropdownList from the DataBase with the help of my article "How to fill DropDownList from Sql server database"

Implementation: Let's create an example web application to see it in action.
  • In the <HEAD> tag of design page(.aspx) write the following jQuery function to validate the file extension before uploading Image
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#btnSubmit').click(function () {
            if ($("#ddlDept").val() > 0) {
                return true;
            else {
                alert('Please select Department')
                return false;

<noscript>  <h3 style="color: #FF3300;">
Javascript is not currently enabled in your browser.<br /> You must <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852" target="_blank" >enable Javascript </a> to run this web page correctly.
  • In the <BODY> tag of design page (.aspx) Place DropDownList control and a button control as:
<fieldset style="width:300px;">
            <legend>Validate DropDownList example using Jquery</legend>
            <asp:DropDownList ID="ddlDept" runat="server" Height="20px" Width="217px">
             <asp:ListItem Text="Select Department" Value="0"></asp:ListItem>
             <asp:ListItem Text="HR" Value="1"></asp:ListItem>
             <asp:ListItem Text="Accounts" Value="2"></asp:ListItem>
             <asp:ListItem Text="Sales" Value="3"></asp:ListItem>
             <asp:ListItem Text="IT" Value="4"></asp:ListItem>
             <asp:ListItem Text="Management" Value="5"></asp:ListItem>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

C#.Net Code to validate asp.net DropDownList control using jQuery

  • In the code behind file(.aspx.cs) write the code on Upload Button’s click event as:
protected void btnSubmit_Click(object sender, EventArgs e)
        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(), "alert('You have selected '+ '" + ddlDept.SelectedItem.Text + "' + ' department');", true);

VB.Net Code to validate asp.net DropDownList control using jQuery

  • In the design page (.aspx) just change the line <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
 with the <asp:Button ID="btnSubmit" runat="server" Text="Submit"/>. Rest is the same

  • In the code behind file(.aspx.vb) write the code on Upload Button’s click event as:
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
        ScriptManager.RegisterClientScriptBlock(Page, Page.[GetType](), Guid.NewGuid().ToString(), "alert('You have selected '+ '" + ddlDept.SelectedItem.Text & "' + ' department');", True)
    End Sub

Note: Have you notice one thing that I have used <noscript> tag in the <Head> section. This is useful in the case if the JavaScript is disabled on the browser running the website. <noscript> tag  executes only if the javaScript is disabled in the browser. jQuery can work only if JavaScript is enabled. So this is the way to detect whether JavaScript is disables or enabled and if disabled then showing appropriate message to enable it from the browser’s setting. 
You can also read my article "How to enable JavaScript in asp.net using C#,VB.Net" to get the detailed knowledge

  • Now run the application and click on submit button without selecting any Department from the DropDownList, it will show the alert message “Please select Department”. If any department is selected then it will show the selected department in the alert/message box.
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..