Home Asp.net DropDownList Validation: Validate DropDownList using jQuery in Asp.net

DropDownList Validation: Validate DropDownList using jQuery in Asp.net

312
0

In my previous tutorials, I’d explained how to validate dropdownlist using javascript, validate radiobuttonlist using jquery, validate checkboxlist using jquery and other more cracking tutorials on DropDownList, Asp.net here.

Validation is one of the greatest security features to prevent your website against spam. We can do validation in two ways. One is from client-side and another is from server-side validation. Now here in this tutorial, I’ll explain how to proceed with dropdownlist validation using JQuery from client-side in asp.net.

Now we are going to implement the code, follow the step by step guidelines to proceed with the dropdownlist validation using JQuery.

First we need to give reference of jQuery under head section. You can simply use below line in head section of your .aspx page.

Add jQuery Reference

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

After applying jQuery, you are now ready to use jQuery built-in events and functions. Here is the jQuery Script that use to validate DropDownList.

Function To Validate Asp.net DropDownList Control – [jQuery]

<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=btnSave]").click(function () {
            if ($("[id$=ddlImageFormat]").val() > 0) {
                //Selected option from dropdownlist
                return true;
            } else {
                //Not selected so alert user to select any option
                alert('Please select image format from the list.');
                return false;
            }
        });
    });
</script>

HTML Markup For DropDownList Validation – [.aspx]

Following is the complete HTML Markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>DropDownList Validation using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id$=btnSave]").click(function () {
                if ($("[id$=ddlImageFormat]").val() > 0) {
                    //Selected option from dropdownlist
                    return true;
                } else {
                    //Not selected so alert user to select any option
                    alert('Please select image format from the list.');
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Select Image Format</td>
                <td>:</td>
                <td>
                    <asp:DropDownList ID="ddlImageFormat" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Value="0" Text="Please select" />
                        <asp:ListItem Value="1" Text=".jpg" />
                        <asp:ListItem Value="2" Text=".png" />
                        <asp:ListItem Value="3" Text=".gif" />
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;&nbsp;</td>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Example Result

DropDownList Validation using jQuery in Asp.net
DropDownList Validation using jQuery in Asp.net

Download Example

Git Repo

That’s it, this is one of the simplest way to validate dropdownlist using jquery or javascript in asp.net.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy Coding!

Previous articleRadioButtonList Validation: Validate RadioButtonList using JavaScript in Asp.net
Next articleAsp.net TextBox: How to Get Set TextBox Value or Text in jQuery
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eleven − 1 =