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

DropDownList Validation: Validate DropDownList using JavaScript in Asp.net

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

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 from client-side using JavaScript in asp.net.

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

Now we are going to implement the code, follow the step by step guidelines to validate the drop down list.

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

Here is the JavaScript function that we need to use to validate dropdown list:

<script type="text/javascript">
    function ValidateDropDownList() {
        var isSelected = false;
        var ddlImageFormatVal = document.getElementById("<%=ddlImageFormat.ClientID%>").value;
        if (ddlImageFormatVal > 0) {
            //Selected option from dropdownlist
            isSelected = true;
        } else {
            //Not selected so alert user to select any option
            alert("Please select image format from the list.");
        }

        return isSelected;
    }
</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 JavaScript</title>
    <script type="text/javascript">
        function ValidateDropDownList() {
            var isSelected = false;
            var ddlImageFormatVal = document.getElementById("<%=ddlImageFormat.ClientID%>").value;
            if (ddlImageFormatVal > 0) {
                //Selected option from dropdownlist
                isSelected = true;
            } else {
                //Not selected so alert user to select any option
                alert("Please select image format from the list.");
            }

            return isSelected;
        }
</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" OnClientClick="return ValidateDropDownList();"
                            runat="server" Text="Save" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

In above sample code, you can examine that I have used OnClientClick=”return ValidateDropDownList();” which means we are calling a ValidateDropDownList() function on client-click event of btnSave and evaluate image type is selected or not from the dropdownlist to validate the dropdown or dropdownlist in asp.net.

Example Result

DropDownList Validation using JavaScript in Asp.net
DropDownList Validation using JavaScript in Asp.net

Download Example

Git Repo

That’s it, this is one of the simplest way to validate asp.net dropdown list using javascript or jquery 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 articleHow to split string into Array of Day, Month, Year in Asp.net Using C# Vb.net [Solved]
Next articleHow to jQuery Split String to Array in Asp.net
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

11 − 7 =