Validation using JQuery with ASP.Net

In this article I would like to share with you how to use validation using JQuery in asp.net. JQuery plays a major role for any technology. It is simple to understand and easy to use. It can create impressive animations and interactions.

Now I am discussing about this article using the simple article.

First of all download uploaded file. In this application I am attaching three JQueries as follows:

jquery-1.3.2.js
jquery-latest.js
jquery.validate.js

Example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">

<head runat="server">

<title>Validation Example using JQuery</title>

<link rel="stylesheet" href="ValidationStyle.css" type="text/css" />

<script type="text/javascript" src="script/jquery-1.3.2.js"></script>

<script type="text/javascript" src="script/jquery-latest.js"></script>

<script type="text/javascript" src="script/jquery.validate.js"></script>

<%--this javascriptis used to show the message after valid statement.--%>

<script type="text/javascript">

jQuery.validator.setDefaults({

debug: true,

success: "valid"

}); ;

</script>

<%--write the following javascript for passing the parameter for jquery--%>

<script type="text/javascript">

$(document).ready(function() {
$("#form1").validate({
rules: {
<%=txtUserName.UniqueID %>: {
minlength: 5,
required: true
},
<%=txtPassword.UniqueID %>: {
minlength: 5,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true
},
<%=txtURL.UniqueID %>: {
required: true
}
}, messages: {
<%=txtUserName.UniqueID %>:{
required: "Plaese enter your name",
minlength: "User name must be atleaet of 5 characters"
},
<%=txtPassword.UniqueID %>:{
required: "Plaese enter your password",
minlength: "Password must be atleaet of 5 characters"
},
<%=txtEmail.UniqueID %>:{
required: "Plaese enter your Email Id",
},
<%=txtURL.UniqueID %>:{
required: "Plaese enter Website URL",
}
}
});
});
</script>

</head>

<body>

<form id="form1" runat="server">

<table width="50%" cellpadding="2" cellspacing="4" style="border: solid 1px navy;

background-color: #d5d5d5;">

<tr>

<td colspan="2" align="center">

<b>Validation Example using JQuery</b>