Email,minimum length and required field validation using jquery

Posted by Nithadeepak under jQuery category on | Points: 40 | Views : 6257
.aspx page
<head runat="server">
<script type="text/javascript" src="JQuery.js"></script> /* jquery plugin */
<script type="text/javascript" src="jquery.validate.min.js" ></script> /* jquery-validation plugin*/
<script type="text/javascript" src="script1.js"></script>
<link rel="Stylesheet" type="text/css" href="Style.css" />
</head>/* you can download the plugins from */
<form id="form1" runat="server">
<asp:Label runat="server" ID="name" Text="Name:"></asp:Label>
<asp:TextBox ID="txt1" runat="server" /><br />
<asp:Label runat="server" ID="Label1" Text="Email:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" /><br />
<asp:Button ID="btn1" runat="server" Text="Submit" />

$(document).ready(function() {

//set the rules for the field names
rules: {
txt1: {
required: true,
minlength: 2
TextBox1: {
required: true,
email: true

//set messages to appear inline
messages: {
txt1:"*", /* you can also give path of an image instead of * so that that image will display as error message*/
TextBox1: "*"


return false;

$(document).ready(function() {
$("#btn1").click(function() {

if ($("#form1").validate().element("#txt1") == false)
$("#txt1").css("border", "1px solid Red");
$("#txt1").css("border", "1px solid Black");
if ($("#form1").validate().element("#TextBox1") == false)
$("#TextBox1").css("border", "1px solid Red");
$("#TextBox1").css("border", "1px solid Black");

/* if there is an error while validating it will by default take the style of .error class */

.error {
color: red;

Comments or Responses

Posted by: T.saravanan on: 4/22/2011 Level:Silver | Status: [Member] [MVP] | Points: 10
Hi Nithadeepak,

Kindly post your code using code tag its looking good.
Posted by: Nithadeepak on: 4/25/2011 Level:Bronze | Status: [Member] | Points: 10
Hi Saravanan,

Thank you very much for your advice.

Nitha Deepak.

Login to post response