Validate DropDownList Using JQuery in Asp.Net


Validate DropDownList Using JQuery in Asp.Net

In these Tutorials we see How to Validate Asp.net DropDownlist using JQuery. In above image show one DropDownList and one Button, if we click button without selecting any value in DropDownList then it will show Error Message in Windows Box. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : E-Mail Validation by Using JQuery and another article is How to Show and Hide Div Tag based on RadiobuttonList Click Using JQuery.

HTML Markup : Create DropDownList & Button in Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQuery-with-DropDownList.aspx.cs" Inherits="JQUERY_TUTORIALS_JQuery_with_DropDownList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
 -----       ADD JQuery Code       -------

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddl_country" runat="server">
         <asp:ListItem Text="Select" Value="0"></asp:ListItem>
         <asp:ListItem Text="USA" Value="1"></asp:ListItem>
         <asp:ListItem Text="UK" Value="2"></asp:ListItem>
         <asp:ListItem Text="UAE" Value="3"></asp:ListItem>
         <asp:ListItem Text="INDIA" Value="4"></asp:ListItem>
         <asp:ListItem Text="ICELAND" Value="5"></asp:ListItem>
         <asp:ListItem Text="IRELAND" Value="6"></asp:ListItem>
         <asp:ListItem Text="IRAN" Value="7"></asp:ListItem>
         <asp:ListItem Text="IRAQ" Value="8"></asp:ListItem>
         <asp:ListItem Text="ISRAEL" Value="9"></asp:ListItem>
         <asp:ListItem Text="SRI-LANKA" Value="10"></asp:ListItem>
         <asp:ListItem Text="Other" Value="11"></asp:ListItem>
        </asp:DropDownList> &nbsp;<asp:Button ID="Btn_select_country" runat="server" Text="Click Me...!" />
    </div>
    </form>
</body>
</html>

JQuery DropDownList Validation code

 <script type="text/javascript">
        $(document).ready(function () {
            $('[id$=Btn_select_country]').click(function () {
                if ($('[id$=ddl_country]').val() == "0") {
                    alert("Please Select Your Country");
                }
                else {
                    alert("Thanks for Choosing your Country");
                }
                return false;
            });
        });
    </script>
0 Komentar untuk "Validate DropDownList Using JQuery in Asp.Net"

Back To Top