ARTICLE

Validation in ASP.NET using jQuery

Posted by John Charles Olamendy in Articles | AJAX in C# on April 21, 2009

Tags: ajax, application server, document data, html, javascript, jquery, microsoft.net, validation, visual studio.net

Validation is an important requirement in every enterprise application and every platform has its own implementation to this regards. In this article, I will illustrate how to implement client-side validation in ASP.NET using jQuery.

Tweet
28549
3

Reader Level: Advanced

Introduction

Validation is an important requirement in every enterprise application and every platform has its own implementation to this regards. In this article, I will illustrate how to implement client-side validation in ASP.NET using jQuery.

Getting started with the solution

Now let's open the Visual Studio.NET and create a Web project for the example. Then add a new Web form for the user to enter some data (see Figure 1).

Figure 1

This form contains three required fields: name, email and postal address. We're going to use jQuery validation techniques to prevent the user submitting the form data without filling these required fields by prompting an error message.
The first step is to add the jquery-1.3.2.js and jquery.validate.js files into the "js" directory in the solution as well as to include both files in the jQueryValidation.aspx file (see Listing 1).

 <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

Listing 1

Next step is to initialize the validation rules using the Validation function. Although this function can take several parameters, we're going to use just two of them: rules and message.

The rules parameter enables to specify the fields to validate. In this case, the fields are named as txtName, txtEmail and txtPostalAddress. For each field, we specify that it's required by using the predicate "required:true". There are other predicates for example to validate the format of the an email address such as "email:true", "remote" to specify a remote resource to check if the field is valid, "min" to set a minimum value for the field, "date" to indicate that the field value is a date, "equalTo" to indicate that the field value is the same than another one.
The message parameter enables to specify the error message for a particular field. If you don't provide a custom message, then the default error message "this field is required" is displayed.

The implementation of the Validation function for this example is shown in the Listing 2.

<script type="text/javascript">           $(document).ready 
        ( 
          function() 
          { 
            $("#form1").validate 
            ( 
              {   
                 rules: 
                 { 
                    txtName: 
                    { 
                        required: true 
                    }, 
                    txtEmail: 
                    { 
                        required: true, email: true 
                    }, 
                    txtPostalAddress: 
                    { 
                        required: true 
                    } 
                 }, 
                 messages: 
                 { 
                 } 
              } 
            ); 
          }         ); 
    </script>

Listing 2

Finally, the code is for the jQueryValidation.aspx page is show in Listing 3.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryValidation.aspx.cs" Inherits="JSON_And_jQuery.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>Client-side validation using jQuery</title> 
    <script src="js/jquery-1.3.2.js" type="text/javascript"></script> 
    <script src="js/jquery.validate.js" type="text/javascript"></script> 
    <script type="text/javascript">   
        $(document).ready 
        ( 
          function() 
          { 
            $("#form1").validate 
            ( 
              {   
                 rules: 
                 { 
                    txtName: 
                    { 
                        required: true 
                    }, 
                    txtEmail: 
                    { 
                        required: true, email: true 
                    }, 
                    txtPostalAddress: 
                    { 
                        required: true 
                    } 
                 }, 
                 messages: 
                 { 
                 } 
              } 
            ); 
          } 
        ); 
    </script>  
</head> 
<body> 
    <form id="form1" runat="server"> 
       <div ><span>Name *</span><asp:TextBox runat="server" ID="txtName" Name="txtName"></asp:TextBox></div>   
       <div ><span>E-Mail *</span><asp:TextBox runat="server" ID="txtEmail" Name="txtEmail"></asp:TextBox></div>   
       <div ><span>Postal Address *</span><asp:TextBox runat="server" ID="txtPostalAddress" Name="txtPostalAddress"></asp:TextBox></div> 
       <div><asp:Button ID="btnOK" runat="server" Text="OK" /></div> 
    </form> </body> 
</html>

Listing 3

Conclusion

In this article, I've shown how to implement client-side validation in ASP.NET using jQuery.

Validation in ASP.NET using jQuery

Tags: ajax, application server, document data, html, javascript, jquery, microsoft.net, validation, visual studio.net
Customizing codeplex frozen header gridview

Tags: codeplex, frozen header, gridview

post comment

Hi, this article not working for me. It displaying error like Message: 'undefined' is null or not an object Line: 176 Char: 13 Code: 0 where can i download your article related JQuery script files? could you please upload your code to download.

Posted by vinay kumar on Feb 03, 2012

can u provide feedback form validation in jquery with csharp code

Posted by Akila Akila on Dec 08, 2010