This post explains DropDownList validation Using Jquery and JavaScript in Asp.Net where DropDown is either bind with SqlDataSource or listItems.
Place one drop down and button on the page in design view and add JQuery javascript file in solution and add it's reference in head section of page. write following JQuery script in head section of page.
HTML Source of Drop Down And Button
Now if DropDownList is getting populated from DataBase by SqlDataSource then we need to set AppendDataBoundItems property of dropdown to true and add one list item with text Select at 0th index in Page_Load event.
write following code in code behind.
And write following JQuery code in head section of html source of page.
If we want to use JavaScript Instead of Jquery then write code in following way
Call this function in OnClientClick Event of button
Place one drop down and button on the page in design view and add JQuery javascript file in solution and add it's reference in head section of page. write following JQuery script in head section of page.
1: <head runat="server">
2: <title></title>
3:
4: <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
5: <script type="text/javascript" language="javascript">
6: $(document).ready(function() {
7: $('#Button1').on('click', function(e) {
8: var selectedText = $('#DropDownList1 option:selected').text().toLowerCase();
9: if (selectedText == 'select')
10: {
11: alert('Please select any language.');
12: e.preventDefault();
13: }
14: else
15: alert('You selected ' + selectedText);
16: })
17:
18:
19: })
20:
21: </script>
22:
23: </head>
HTML Source of Drop Down And Button
1: <asp:DropDownList ID="DropDownList1" runat="server">
2: <asp:ListItem>Select</asp:ListItem>
3: <asp:ListItem>C#</asp:ListItem>
4: <asp:ListItem>VB</asp:ListItem>
5: <asp:ListItem>Java</asp:ListItem>
6: <asp:ListItem>C</asp:ListItem>
7: </asp:DropDownList>
8:
9: <asp:Button ID="Button1" runat="server" Text="Button" />
Now if DropDownList is getting populated from DataBase by SqlDataSource then we need to set AppendDataBoundItems property of dropdown to true and add one list item with text Select at 0th index in Page_Load event.
1: <asp:DropDownList ID="DropDownList2" runat="server"
2: AppendDataBoundItems="True"
3: DataSourceID="SqlDataSource1"
4: DataTextField="ProductName"
5: DataValueField="ProductID">
6: </asp:DropDownList>
7: <asp:SqlDataSource ID="SqlDataSource1" runat="server"
8: ConnectionString="<%$ ConnectionStrings:TestDbConnectionString %>"
9: SelectCommand="SELECT [ProductID], [ProductName] FROM [Products]">
10: </asp:SqlDataSource>
11:
12: <asp:Button ID="Button2" runat="server" Text="Button" />
write following code in code behind.
protected void Page_Load(object sender, EventArgs e)
{
DropDownList2.Items.Add(new ListItem("select", "0"));
}And write following JQuery code in head section of html source of page.
1: <script type="text/javascript" language="javascript">
2: $(document).ready(function() {
3:
4: $('#Button2').on('click', function(e) {
5: var selectedValue = $('#DropDownList2').val();
6: if (selectedValue == 0)
7: {
8: alert('Please select any product.');
9: e.preventDefault();
10: }
11: else
12: alert('you selected product with ID ' + selectedValue);
13: })
14:
15: })
16:
17: </script>
If we want to use JavaScript Instead of Jquery then write code in following way
1: <script type="text/javascript">
2:
3: function Validation() {
4: var selectedValue = document.getElementById('<%=DropDownList2.ClientID%>').value;
5: if (selectedValue == "0")
6: {
7: alert("Please Select Product");
8: }
9: else {
10: alert("You selected " + selectedValue);
11: }
12: }
13: </script>
Call this function in OnClientClick Event of button
1: <asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="Validation()" />
