Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JQuery Validations
<%@ 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment