DropDownList Validation Using JQuery JavaScript In Asp.Net

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.

   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()"  />


If you like this post than join us or share

0 comments:

Find More Articles