Code Snippets: Validation Using Jquery in Asp.net page

Validation Using Jquery in Asp.net page

Introduction : This article show you how to add validation using Jquery in Asp.net . Validation is easy in jquery just need add my following complete html code for Jquery validation in asp.net .

Hows Jquery validation works in Asp.net :

you can download Jquery.validate.js from http://jzaefferer.github.com/jquery-validation/jquery.validate.js

you can apply required validation by adding class to textbox like : CssClass="required". ..etc .so on you can Url validation ,date validation , digits validation ..etc using jquery .

Complete Html Code for Jquery validation in asp.net page :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryValidation.aspx.cs" Inherits="HamidSite.JqueryValidation" %>

<!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></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript"  >
         $(document).ready(function () {
             $("#form1").validate();
         });
  </script>
 <style type="text/css">
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <fieldset style="width:500px;vertical-align:middle;font-family:Verdana;font-size:12px;border-bottom-width:medium;" >
                <legend>Validation Using Jquery in Asp.net page </legend>
                <table align="center" cellpadding="5px" >
                    <tr>
                        <td>
                            Name :
                        </td>
                        <td>
                            <asp:TextBox ID="txtname" CssClass="required" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Amount :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox1" CssClass="digits" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Website url :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox2" CssClass="url" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Email :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox3" CssClass="email" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Date :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox4" CssClass="date" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            
                        </td>
                        <td>
                            <asp:Button ID="btnSave"  runat="server" Text="Submit" />
                        </td>
                    </tr>
                </table>
            </fieldset>
    </div>
    </form>
</body>
</html>

Code Snippets

Pages

Friday, January 6, 2012

Validation Using Jquery in Asp.net page

2 comments: