As web developers one of the most frequent things we’re tasked with building is some sort of form to capture data from our visitors. As we’ve all learned (some of us the hard way), putting a form out there and trusting that our visitors will use it exactly the way we design it every time is the proverbial pipe dream. How many times have each of us written Javascript functions to validate the entries into form fields? It’s much the same every time and, honestly, it gets old reinventing the wheel each time. Enter cfUniform, a very robust, open-source custom tag library from Matt Quackenbush (with others contributing).
cfUniform is a ColdFusion custom tag library that makes adding validation to your forms a snap. The fact that it writes (most) validation for you based on attributes you put in the tag makes it worth using for that feature alone in my mind. However, the benefits don’t stop with validation. It also styles your form fields, labels, hints and error messages for you. Since you can configure a link to a CSS stylesheet in the configuration for the custom tag, you can skin the output generated by cfUniform to match your site’s look and feel.
Best of all, its REALLY easy to get started with. The example below assumes that you’ve put /tags and /commonassets folders from the distribution file in the root of your web site.
<cfimport taglib="/tags/forms/cfUniForm" prefix="uform" /> <div class="cfUniForm-form-container"> <uform:form action="someFile.cfm" id="loginForm" submitValue=" Log In " loadjQuery="true" loadValidation="true" loadMaskUI="true" loadDateUI="false" loadTimeUI="false"> <uform:fieldset legend=""> <uform:field label="User Name" name="username" isRequired="true" type="text" hint="Enter your user name." /> <uform:field label="Password" name="password" isRequired="true" type="password" hint="Enter your password." /> </uform:fieldset> </uform:form></div>That simple example gets you a login form that has javascript validation requiring a value in both fields as well as Javascript-driven error message feedback to the user when they don’t fill out one of the fields. Obviously this is a very simple use case and cfUniform supports a whole range of things you typically want to do on a form. If you have a very specific validation case, you can even specify your own custom javascript to use as the validation when the form is submited.
If you’re like me, you’ve probably got a “pet” folder structure that you use for your projects and they typically don’t have the folders /tags and /commonassets hanging off the root. The developers foresaw this quandary and included the facility to pass in a structure containing configuration keys that point the library to the location of various files in the web structure. This is one of my favorite features because it allows me to compartmentalize the library into whatever part of my folder structure I want and then pass in the configuration values. It also makes it very easy to configure a config object in ColdSpring using a MapFactoryBean (remember talking about those a couple weeks ago in this post?) so that you reuse the same configuration object every time you use the library throughout your application.
I’ve not gone into a great amount of detail here on how to use the many features of the library because the developers have a well-rounded set of examples already published. There you’ll see the directions for how to set up a MapFactoryBean config object in ColdSpring as well as all the other form field options that you have in the framework.
Thanks to Matt and the other developers for removing a great portion of the mundane Javascript validation stuff and giving us an easy-to-use library to standardize the look and feel of our forms.