Validation using JQuery with ASP.Net

Purushottam Rathore
14y
76.9k
0
4

Article

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

<title>Validation Example using JQuery</title>

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

jQuery.validator.setDefaults({

debug: true,

success: "valid"

}); ;

</script>

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

        $(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>

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

background-color: #d5d5d5;">

<tr>

<b>Validation Example using JQuery</b>

</td>

</tr>

<tr>

User Name :

</td>

<td>

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

</td>

</tr>

<tr>

Password :

</td>

<td>

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

</td>

</tr>

<tr>

Email Id :

</td>

<td>

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

</td>

</tr>

<tr>

URL :

</td>

<td>

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

</td>

</tr>

<tr>

</td>

<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:

Figure 1: All fields are required

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

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

Figure 4: Password range must be atleast 5 characters

Figure 5: Check email validation

Figure 6: Valid email.

Figure 7: Check valid url

Figure 8: All inputs are valid.

erver'>