Photo from Chile

Getting Started with VT and Transfer - Part V - Enabling Client-Side Validations

Update: The information in this post is no longer correct due to changes to the framework. A new series is available via the Getting Started with VT category of my blog.

Original content of the article follows:

In the previous post in this series about getting started with Transfer and ValidateThis!, my validation framework for ColdFusion objects, we looked at implementing a couple of server-side validations using the framework. 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 you'll see that all we need to do is add a few lines of code to our form page and our client-side validations will be enabled:


<cfhtmlhead text="#UserTO.getInitializationScript()#" />
<cfhtmlhead text="<script src='js/custom.js' type='text/javascript'></script>" />
<cfhtmlhead text="#UserTO.getValidationScript()#" />

We'll take a look at each line:

  1. VT includes a method that will return all of the JavaScript code required to load and set up the required JavaScript libraries. That is what the call to UserTO.getInitializationScript() is doing.
  2. The next line of code is not part of the framework and is not required to enable validations. It simply includes a JavaScript file that is required to make the sample form look the way it does. Basically, if you need to do any custom set up of the jQuery validation plugin you can do so by including your own JavaScript like this.
  3. The final line is asking VT to return JavaScript statements that implement all of the business rules defined for our User Business Object.

As you can see each of the JavaScript blocks are loaded into the head of the page via the cfhtmlhead tag.

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

You can see a demo of this version of the sample application in action at www.validatethis.org/VTAndTransfer_PartIII/. As always all of the code for this version of the sample application can be found attached to this post.

Comments