QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

cfUniForm v3.0 - Complete Update Bringing Support for Latest Uni-Form and jQuery Releases

Posted on February 20, 2009 at 6:09 PM in ColdFusion, Uni-Form Tag Library

Thanks to the combination of the holidays and a huge workload, it has been a few months since the last significant update to cfUniForm. During this time there have been updates to the Uni-Form markup/CSS as well as to jQuery and several of the integrated plugins. I finally decided to sit down and take the time to update cfUniForm to include all of these various updates.

WARNING: Older Code Could Break

That's a rather ominous statement, eh?

The v3.0 release has undergone major internal changes that should be completely transparent in most use cases. However, due to a variety of changes in the Uni-Form markup and CSS, it is possible that older forms could be a little funky if you have made changes to the CSS rules in your application. If you have not, then you should not see any issues.

Also, if you are using different jQuery or plugin releases than those loaded by default, you could see some issues when you drop this new version into your app. (If you are using the defaults, there should be no issues.)

I have tested this new release with my own applications without any issues, but given the major differences in this release, I wanted to make absolute certain that you know that the possibility of altered results does exist.

No Longer Supported

Support for four attributes of the field tag has been removed from the v3.0 release:

1. textareaRows
2. textareaCols
3. addClass
4. isInline

The size of textareas should be controlled via CSS.

If you are using the 'addClass' attribute in any of your old forms, simply do a find/replace and change that to 'containerClass'.

The 'isInline' attribute was used in the original release of cfUniForm for checkboxes and radio buttons. Due to changes in the Uni-Form markup and CSS, it has been removed in the v3.0 release. There is no replacement.

Deprecated in v3.0

The 'validation' attribute (field tag) was previously used to add one or more classes to a form element that would be used by jQuery's validation plugin to do simple validations. This attribute has been deprecated in the v3.0 release, and support for it will be completely removed in a future release.

These validation classes should be added via the 'inputClass' attribute instead. Run a quick find/replace on your forms to replace 'validation="' with 'inputClass="'.

What's New?

cfUniForm v3.0 doesn't really have very many new "features", per se, as the changes are predominantly just a reworking of the internal mechanics of the library. However, there are a few changes that I wanted to specifically point out.

Uni-Form v1.3 Markup/CSS

The latest Uni-Form markup and CSS has a few new features in it that are now supported by cfUniForm:

• OKMsg
• multiField
• error message highlighting

The new OKMsg is a simple div that can be displayed to alert the user that their form submission was processed correctly. To add an OKMsg to your form, simply use the new OKMsg attribute on the form tag.

1. <cfset okmsg = "Form submission was successful." />
2. <uform:form action="#cgi.script_name#"
3. id="myDemoForm"
4. okMsg="#okmsg#">

You can use cfUniForm's type="custom" field in conjunction with multiField to display multiple fields in the same form "row". Here's a quick example:

1. <uform:field type="custom">
2. <p class="label">
3. <em>*</em> Date of Birth
4. </p>
5. <div class="multiField">
6. <label for="dob_month" class="blockLabel">
7. Month
8. <select id="dob_month"
9. name="dob_month">
10. <option value="1">January</option>
11. </select>
12. </label>
13. <label for="dob_day" class="blockLabel">
14. Day
15. <select id="dob_day"
16. name="dob_day">
17. <option value="1">1</option>
18. </select>
19. </label>
20. <label for="dob_year" class="blockLabel">
21. Year
22. <select id="dob_year"
23. name="dob_year">
24. <option value="1">1908</option>
25. </select>
26. </label>
27. </div>
28. <p class="formHint">Don't lie!</p>
29. </uform:field>

The new error message highlighting is handled internally by the markup and CSS, so there's not any code to show. However, you can view it and the other new features in the kitchen sink demo.

jQuery 1.3.1

cfUniForm v3.0 now loads jQuery 1.3.1 by default. This is the latest jQuery release, and it features a number of enhancements. For more information on jQuery, please visit jquery.com.

jQuery Validation Plugin 1.5.1

One of my favorite things in the cfUniForm v3.0 release is the inclusion of the latest release of the jQuery validation plugin. Like its jQuery 1.3.1 counterpart, this release has a number of significant changes and enhancements. Thankfully there are several configuration enhancements which has allowed me to fully integrate the plugin without making any alterations to it, unlike the first integration which required numerous internal changes. :-)

One such change that I had to make in the original release was to disable the plugin's ability to validate on-the-fly. This is an awesome feature of the plugin that has been sorely missed in cfUniForm. This meant that in previous cfUniForm releases, client-side validation was done only on submit. I am pleased to announce that with the v3.0 release client-side validation is done as the user types!

NOTE #1: If you are loading an older version of jQuery in your applications, it is quite possible that the new validation plugin will not work properly. You should definitely be using jQuery 1.3.1.

NOTE #2: A few of the validation plugin's attributes changed with this latest release. One such example is the minimum length attribute:

• OLD: minLength
• NEW: minlength

This caught me out when I was checking the custom validation demo to make sure it still worked under the new release. If you find that your client-side validations stop working, I would highly recommend checking the validation plugin docs to make sure you're using the proper cAsE and attributes.

NOTE #3: One of the most basic validations is to make a field required by adding a 'required' class to the field. cfUniForm v3.0 now adds this class automatically if the isRequired attribute is true.

Additional jQuery Plugin Updates

cfUniForm v3.0 loads the latest releases of the following jQuery plugins:

• Masked Input
• Time Entry

For details on the plugin features, please visit the respective plugin pages.

Demos

Be sure to visit the cfUniForm demos to see the various features (new and old) in action.

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 2/21/09 at 8:15 AM, George Murphy said:

Hi Matt, thanks for doing this. You have given me something to work on over the weekend. Thanks, so much! :-) LOL. I am not sure how you would do it but it would be really nice if you could do the validations client side
on the custom field types. You posted before on how to do it server side which is great, but it takes the user out of the flow if you are posting back to the submitting page.

On 2/21/09 at 10:11 AM, Matt Quackenbush said:

@ George - Client-side validations on custom fields should be no different than any other validations. Take a look at the custom validation demo for examples of how to use the validation plugin.

http://www.quackfuzed.com/demos/cfUniForm/customVa...

On 4/23/09 at 5:17 PM, George said:

Hi Matt,

I am using TinyMCE; inside a uform custom field type. How can I get the row
highlighting that I get when I click inside a uform form element type.
There is no row highlighting when TinyMCE get focus.

On 4/23/09 at 5:25 PM, Matt Quackenbush said:

@ George - The highlighting is based upon the Uni-Form markup. For the custom field to be highlighted, it will need the appropriate divs and classes assigned to the elements. Links to the markup spec are included in the demos section (http://www.quackfuzed.com/demos/cfUniForm/).

[Add Comment]