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>

            </td>

        </tr>

        <tr>

            <td align="right" width="75px">

                User Name :

            </td>

            <td>

                <asp:TextBox ID="txtUserName" runat="server" Width="180px"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td align="right">

                Password :

            </td>

            <td>

                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="180px"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td align="right">

                Email Id :

            </td>

            <td>

                <asp:TextBox ID="txtEmail" runat="server" CssClass="email" Width="180px"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td align="right">

                URL :

            </td>

            <td>

                <asp:TextBox ID="txtURL" runat="server" CssClass="url" Width="180px"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td align="right">

                &nbsp;

            </td>

            <td align="left">

                <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

            </td>

        </tr>

    </table>

    </form>

</body>

</html>


Use the following Style sheet


StyleSheet:

body{}

#field{margin-left: .5em;float: right;}

#field, label{float: left;font-family: Arial, Helvetica, sans-serif;font-size: small;}

br{clear: both;}

input{border: 1px solid black;margin-bottom: .5em;}

input.error{border: 1px solid red;}

label.error{position:absolute;background: url('Images/unchecked.gif') no-repeat;padding-left: 20px; margin-left: .3em; vertical-align: middle;background-color: #FFEBE8;border: solid 1px red;width: 250px;}


label.valid
{position:inherit;background: url('Images/checked.gif') no-repeat;display: block;width: 16px;height: 16px;border: none;vertical-align:top;}


Output:


image1.JPG
Figure 1: All fields are required

image2.JPG
Figure 2: In the first text box range should be atleast 5 characters.

image3.JPG
Figure 3: The input of the first textbox is valid. Here blue icon represent the valid data.

image4.JPG
Figure 4: Password range must be atleast 5 characters

image5.JPG
Figure 5: Check email validation

image6.JPG
Figure 6: Valid email.

image7.JPG
Figure 7: Check valid url

image8.JPG 
Figure 8: All inputs are valid.

erver'>