Photo from Chile

Getting Started with VT - Enabling Client-Side Validations

In the previous post in this series about getting started with ValidateThis!, my validation framework for ColdFusion objects, we looked at how to very quickly get up and running with the framework, and how to use it to perform server-side validations for our objects. In this post we'll look at enabling client-side validations for those same business rules.

VT is designed to generate both server-side and client-side validations from a single set of business rules, so we don't have to do any additional coding for the validations themselves, all we have to do it a bit of set up, and then ask the framework for the JavaScript. Let's start with the set up.

Step 1 - The JS Files

By design, VT can support any JavaScript validation library, including one of your own making, but it currently ships with an implementation for a single validation library, the jQuery Validation Plugin. VT will generate JavaScript statements for all of your validations, and those statements will assume that a few JavaScript files have been loaded on your page. The following files are required to allow the jQuery Validation Plugin to work:

  • jquery-1.3.2.min.js - the jQuery library
  • jquery.validate.pack.js - the jQuery Validation Plugin
  • jquery.field.min.js - the jQuery Field Plugin

The latest versions of those files ship with VT and can be found in /ValidateThis/client/jQuery/js. So, you'll need to copy those files to a web accessible folder (e.g., /js/), if you don't already have a copy of them from whence they can be accessed.

Step 2 - Load JavaScript Libraries

As discussed above, those files need to be loaded into your web page. You can do that manually, using code similar to this:

view plain print about
1<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
2<script src="/js/jquery.field.min.js" type="text/javascript"></script>
3<script src="/js/jquery.validate.pack.js" type="text/javascript"></script>

Or you can ask VT to load the files for you, using a convenience method. Assuming you have access to VT in a variable, such as application.ValidateThis (as discussed in the previous post), you can simply call getInitializationScript(), passing in the objectType:

view plain print about
1<cfhtmlhead text=
2    "#application.ValidateThis.getInitializationScript(objectType='user.user')#"
3/>

VT will generate the code required to load all of the libraries for you, which cfhtmlhead then places into your head tag.

Step 3 - Ask VT to Generate the Validation JavaScript

Similar to the above, you can simply call getValidationScript(), passing in the objectType:

view plain print about
1<cfhtmlhead text=
2    "#application.ValidateThis.getValidationScript(objectType='user.user')#"
3/>

VT will generate individual JavaScript statements to implement all of your object's validations.

And it's as simple as that - your page will now provide client-side validations!

In the next post I'll look at some of the other validation types that are currently available in the framework.

As always, if you have any questions or interest in following the progress of VT, I invite you to join the ValidateThis! Google Group.

Related Blog Entries

TweetBacks
Comments
Hey! Nice to see my Field Plug-in being used in something. :)
# Posted By Dan G. Switzer, II | 4/30/09 4:11 PM
Hey Dan, I've been using qForms for several years - it rocks! I moved over to jQuery some time ago, but I have many sites still using qForms. I even created a partial qForms implementation for VT. So I'm used to being able to access form field values easily, which is why I really like your Field Plugin.

Funny, I was actually planning on including a link to your Field Plugin page in my post, but forgot to go back and add it when I first posted it. That has now been corrected.

Thanks so much for your great contributions to the OSS world!
# Posted By Bob Silverberg | 5/1/09 9:25 AM