Jun 21, 2010

JQuery Example For validations

<%@ 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>JQuery Example www.dotnetspark.com</title>
<style type="text/css">
label.error { color: red; vertical-align: top; }
    .style1
    {
        font-size: xx-large;
        font-weight: bold;
    }
</style>

     <script type="text/javascript" src="script/jquery-1.3.2.js"></script>
     <script type="text/javascript" src="script/jquery.validate.js"></script>
   <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 username",
                        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 style="width:100%;">
        <tr>
            <td colspan="3" align="center" class="style1">
                JQuery Validation Example</td>
          
        </tr>
        <tr>
            <td colspan="2" align="center">
                &nbsp;</td>
          
        </tr>
        <tr>
            <td align="right">
                <asp:Label ID="lblUserName" runat="server" Text="User Name :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtUserName" runat="server" Width="230px"></asp:TextBox>
            </td>
           
        </tr>
        <tr>
            <td align="right">
                <asp:Label ID="lblPassword" runat="server" Text="Password :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server"  TextMode="Password" Width="230px"></asp:TextBox>
            </td>
           
        </tr>
        <tr>
            <td align="right">
                <asp:Label ID="lblEmail" runat="server" Text="Email Id :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtEmail" CssClass="email" runat="server"
                    Width="230px"></asp:TextBox>
            </td>
          
        </tr>
        <tr>
            <td align="right">
                <asp:Label ID="lblURL" runat="server" Text="URL :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtURL" CssClass="url" runat="server" Width="230px"></asp:TextBox>
            </td>
           
        </tr>
        <tr>
            <td align="right">
                &nbsp;</td>
            <td>
                &nbsp;</td>
           
        </tr>
        <tr>
            <td align="right">
                &nbsp;</td>
            <td>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
            </td>
          
        </tr>
    </table>
    </form>
</body>
</html>

No comments:

Post a Comment