Microsoft Ajax CDN and the jQuery Validation Library

Scott Guthrie announced the launch of the Microsoft Ajax CDN on his blog last night. If you have not read his post, I recommend that you read it now to get a general overview of the CDN and how you can take advantage of the CDN to improve the performance of your ASP.NET Web Forms and ASP.NET MVC applications:

http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

In his announcement, Scott describes how both the ASP.NET Ajax and the jQuery libraries are included in the CDN. There is one more set of JavaScript files that we added to the CDN today that Scott did not announce: the jQuery Validation library.

If you are not familiar with the jQuery Validation library then you should know that this is one of the most popular form validation libraries used by jQuery developers. We are shipping the jQuery validation library with both ASP.NET Web Forms and ASP.NET MVC when we ship Visual Studio 2010.

Furthermore, we are integrating the jQuery Validation library with ASP.NET MVC. When you add an error to ModelState – for example, by using ModelState.AddModelError() – the error will float up to the client automatically. The jQuery Validation library is the JavaScript library used by ASP.NET MVC to implement client-side validation.

I had the pleasure of meeting Jörn Zaefferer at the jQuery conference in Cambridge last weekend (You pronounce Jörn’s name like Yearn). He has written a really great validation library and now you can use his validation library directly from the Microsoft Ajax CDN.

Here are the URLs for the jQuery Validation library:

The first URL contains the unminified (human readable) version of the jQuery validation library. The second URL contains a minified version of the library that you should use in production applications. Finally, the third URL points to a JavaScript file that contains Intellisense comments for the jQuery validation library that is used by Visual Studio 2010 automatically.

Here’s a simple Web Forms page that uses the jQuery Validation library to validate a Registration form (see Figure 1):

Listing 1 – Registration Form

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestjQueryValidation.aspx.cs" Inherits="WebApplication2.TestjQueryValidation" %>

<!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>Registration Form</title>

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
        type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" 
        type="text/javascript"></script>
    
    <style type="text/css">
    
    input.error
    {
        background-color: #FFFF99;
    }
    
    </style>
    
    <script type="text/javascript">
      $(documentReady);
      
      function documentReady() 
      {
        $("#form1").validate();
      };
      
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <h1>Register</h1>
    
    <asp:Label 
        ID="lblName" 
        AssociatedControlID="txtName" 
        Text="Name:"
        runat="server" />
    <asp:TextBox 
        ID="txtName" 
        CssClass="required" 
        runat="server" />

    <br /><br />
    
    <asp:Label 
        ID="lblEmail" 
        AssociatedControlID="txtEmail" 
        Text="Email:"
        runat="server" />
    <asp:TextBox 
        ID="txtEmail" 
        CssClass="required email"
        runat="server" />
    
    <br /><br />
    
    <asp:Button 
        ID="btnSubmit" 
        Text="Register" 
        runat="server" />
    
    </div>
    </form>
</body>
</html>

Figure 1 – Create Movie form

The Registration form in Listing 1 contains two TextBox controls for a user name and email address. The jQuery Validation library is used to make both fields required and validate that a proper email address has been entered. There are two things that you need to do to get the jQuery Validation library to work:

Call the validate() method on your form. Calling the validate() method sets up the client validation.
Add the right classes to the fields that you want to validate. In the case of Listing 1, I added a required class to both the txtName and txtEmail TextBox controls and an email class to the txtEmail TextBox control.

The jQuery Validation library supports a number of specialized validation classes including classes like url and creditcard: If you want to read the full documentation for the jQuery Validation library then you can visit the following website:

http://docs.jquery.com/Plugins/Validation

If you liked this blog post then please

Subscribe to this blog.