I came up with another article on jQuery validation, which performs validation on the ASP.NET server-side dropdown list control. In this article, we can perform the required field validation which means the user should select any one of the options except the select option otherwise it will give an error message i.e Please Select Your Country
Before we explore more about this article, I strongly recommend you go through my previous articles Email Validation using jQuery and Show/Hide Div Tags based on RadioButtonList Click using jQuery and JavaScript.
HTML Markup: Creating DropDownList & Button in the Page
I created the User Interface of Asp.Net Dropdownlist based on the above image, consider that image as a requirement and design accordingly in your ways. So I added a dropdown list along with the countries list as options and also added button control.
<%@ 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> <asp:Button ID="Btn_select_country" runat="server" Text="Click Me...!" />
</div>
</form>
</body>
</html>
- Change dropdown list id to ddl_country
- Change button control id to Btn_select_country
JQuery DropDownList Validation code
In jQuery validation control, $('[id$=Btn_select_country]').click(function () { this line indicates that when the user clicks on the button this click function triggers and checks whether that dropdown list is selected other than a select option or not.
- If the dropdown list does not select any country by default selection is a select option only. This will throw an error i.e Please Select Your Country and return false.
- If the dropdown list selects a county from the list then it will return true.
- If validation fails it will return false, which means it won't allow them to execute server-side code.
- If validation succeeds then it returns true, which means it allows to execute of server-side 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");
return false;
}
else {
alert("Thanks for Choosing your Country");
return true;
}
});
});
</script>
0 Comments