Validation in ASP.NET using jQuery

John Charles Olamendy
15y
66.9k
0
0

Article

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>