Note : This post is first published on Sep-2014 in my previous blog Techkindle. Moving the content here.
Code Snippet for validating the textbox, dropdownlist, and radiobuttonlist in ASP.NET page using Jquery.
To check Textbox value:
txtName is the textbox id:
if ($.trim($(“#txtName”).val()).length == 0) {
//Enter a name
}
To check Whether entered value is number or not:
$.isNumeric(value) method can be used to check for number
var age = $.trim($(“#txtAge”).val());
if ($.isNumeric(age)) {
//Entered number is Numeric
}
To check whether any radio button is checked:
rdbGender is the Radiobuttonlist id:
if ($(“#rdbGender input:checked”).length == 0) {
//Gender is not selected
}
To check whether any dropdownlist value is checked:
ddlQualification is the Dropdownlist id:
if ($(“#ddlQualification option:selected”).val() == 0) {
//Qualification is not selected
}
Full Source Code
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validations.aspx.cs" Inherits="Validations" %> | |
| <!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"> | |
| <title></title> | |
| <head id="Head1" runat="server"> | |
| <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> | |
| <style type="text/css"> | |
| .redcolor | |
| { | |
| color:Red; | |
| } | |
| .boldtext | |
| { | |
| font-weight:bold; | |
| } | |
| p | |
| { | |
| margin-bottom: 10px; | |
| line-height: 1.6em; | |
| margin-left:10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form id="form1" runat="server"> | |
| <div runat="server" style="width: 50%; border: 2px Double Black;"> | |
| <p> | |
| <asp:Label ID="lblName" Text="Name" runat="server" CssClass="boldtext"></asp:Label><span class="redcolor">*</span> | |
| <asp:TextBox ID="txtName" runat="server"></asp:TextBox> | |
| </p> | |
| <p> | |
| <asp:Label ID="lblAge" Text="Age" runat="server" CssClass="boldtext"></asp:Label><span class="redcolor">*</span> | |
| <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> | |
| </p> | |
| <p> | |
| <asp:Label ID="lblGender" Text="Gender" runat="server" CssClass="boldtext"></asp:Label><span class="redcolor">*</span> | |
| <asp:RadioButtonList ID="rdbGender" runat="server" RepeatDirection="Horizontal"> | |
| <asp:ListItem Text="Male" Value="Male"></asp:ListItem> | |
| <asp:ListItem Text="Female" Value="female"></asp:ListItem> | |
| </asp:RadioButtonList> | |
| </p> | |
| <p> | |
| <asp:Label ID="lblQualification" Text="Qualification" runat="server" CssClass="boldtext"></asp:Label><span | |
| class="redcolor">*</span> | |
| <asp:DropDownList ID="ddlQualification" runat="server"> | |
| <asp:ListItem Text="–Select–" Value=""></asp:ListItem> | |
| <asp:ListItem Text="Below-Graduation" Value="Below-Graduation"></asp:ListItem> | |
| <asp:ListItem Text="Graduation" Value="Graduation"></asp:ListItem> | |
| <asp:ListItem Text="Post-Graduation" Value="Post-Graduation"></asp:ListItem> | |
| </asp:DropDownList> | |
| </p> | |
| <p> | |
| <asp:Button ID="btnSubmit" runat="server" Text="submit" /> | |
| </p> | |
| </div> | |
| </form> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| //Validating all the fields when Submit button is clicked | |
| $("#btnSubmit").click(function (e) { | |
| //Name validation | |
| if ($.trim($("#txtName").val()).length == 0) { | |
| alert("Please Enter name"); | |
| return false; | |
| } | |
| //Age (Numeric & Range) validation | |
| var age = $.trim($("#txtAge").val()); | |
| if (age.length == 0) { | |
| alert("Please Enter Age"); | |
| return false; | |
| } | |
| else if (!$.isNumeric(age)) { | |
| alert("Please enter a number"); | |
| return false; | |
| } | |
| else if (age < 0 || age > 150) { | |
| alert("Age cannot be negative or more than 150"); | |
| return false; | |
| } | |
| //Gender validation | |
| if ($("#rdbGender input:checked").length == 0) { | |
| alert("Please select a gender"); | |
| return false; | |
| } | |
| //Qualification Validation | |
| if ($("#ddlQualification option:selected").val() == 0) { | |
| alert("Please select a qualification"); | |
| return false; | |
| } | |
| alert("Data submitted successfully"); | |
| return true; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Output Screen
Happy Learning 🙂
