JQuery Validations

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>