Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to do validation using jQuery in ASP.NET

Author: Rachel Nicole
Download Source Code : 1309_ValidationUsingJQuery.zip

The purpose of this article is to explain that how we can validate Server Controls using jQuery in ASP.NET.

 

jQuery has many features and plug-in that made our life very easy in developing applications. I have explored some features in my previous articles on devASP.NET. In this article, I will show how validation of Server controls can be done using jQuery and jQuery validation plug-in. You have to download both JavaScript files and include it in your application to use for this example.

You can do validation in ASP.NET using validation controls from Validation Toolbox in Visual Studio. But you might need some time to use jQuery to do validation. Using jQuery and jQuery validation plug-in to validate Server controls is not difficult. Let’s see how we can do it.

  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C#  > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and jQuery Validation plugin and include these files in this folder.

    jquery-1.4.1.min.js
    jquery-validate.min.js
     
  6. Add two <script> tags in between <head> tag of Default.aspx page. You have to give reference for both jQuery and jQuery Validation plugin as below.

    <head runat="server">
        <title>Validation Example using JQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.validate.min.js"></script>
    </head>

     
  7. Write code below in Default.aspx page in between <form> tag

    <div>
        <asp:Label ID="Label1" runat="server" Text="Enter Name:"></asp:Label>
        <asp:TextBox ID="txtBoxName" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Enter Password:"></asp:Label>
        <asp:TextBox ID="txtBoxPassword" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="Label3" runat="server" Text="Enter Email:"></asp:Label>
        <asp:TextBox ID="txtBoxEmail" CssClass="email" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Click Here"
            onclick="Button1_Click" />
        <br />
        <asp:Label ID="lblMessage" runat="server"></asp:Label>

     
    Add three Label controls and three TextBox controls for name, password and email. Add a Button control and add a one more Label control to see result. Note in TextBox control of email, we have to set the CssClass attribute to “email” otherwise it will not work for email validation.
     
  8.  Add another <script> tag in between  <head>  tag and write code below in it.

    <script type="text/javascript">
        $(document).ready(function(){
            $("#form1").validate({
            rules: {
                <%=txtBoxName.UniqueID %>: {
                required: true,
                minlength: 3
                },
                <%=txtBoxPassword.UniqueID %>: {
                required: true,
                minlength: 6
                },
                <%=txtBoxEmail.UniqueID %>: {
                required: true,
                }
            },
            messages: {
                <%=txtBoxName.UniqueID %>: {
                required: "Please enter your name",
                minlength: "Please enter atleast 3 charactors"
                },
                <%=txtBoxPassword.UniqueID %>: {
                required: "Please enter your password",
                minlength: "Please enter atleast 6 charactors"
                },
                <%=txtBoxEmail.UniqueID %>: {
                required: "Please enter your email",
                }
            }
        });
      });
    </script>

     
    First define “rules” for validation and then display messages. Get the controls by using UniqueID of controls. Set “required” to true and set “minlength” as per your requirement.
     
  9. Now add Button Click event and write code below to confirm that we have succeeded and to display result.

    C#
     
    protected void Button1_Click(object sender, EventArgs e) {
       lblMessage.Text = "Welcome: '" + txtBoxName.Text + "'. Your Email is : '" + txtBoxEmail.Text + "'";
    }
     
    VB.NET

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        lblMessage.Text = ("Welcome: '" & txtBoxName.Text & "'. Your Email is : '") & txtBoxEmail.Text & "'"
    End Sub
     
  10. Build website and see in browser. Enter values and see result.  Download source code for this example. 
   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use two DropDownList controls in GridView control in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net