While thinking about alternatives, I started looking at Spry, the Adobe’s framework embedded in Dreamweaver CS3. Spry can do much more than input validation, but for now I’m only interested in this part. It’s available for free, but if you want the ease-of-use you will need Dreamweaver CS3.
In this first article about Spry, I want to show you why it can be important to you if you are a Dreamweaver user. It’s just a warming-up to get your attention actually :-).
In a second article I’ll start with a Dreamweaver prototype form and Spry it up and in a third article, I’ll transfer it to a Notes webform. If there’s enough interest, a fourth article could be about Sprying up an existing Notes webform.
Why use Spry?
I often start prototyping in Dreamweaver anyway
When I have to create a new form for the web, I often start by making a Fireworks prototype, html-ize it in Dreamweaver and if the html and css is alright, transfer it to Lotus Notes. So it’s already there in my toolbox.
Spry has a very extended set of standard validation properties
Click the thumbnail below to see what I mean:
- Type of fields: text fields, radio buttons, selects, text areas, checkboxes (that’s every kind of field, right?)
- Checks: required (not empty), integer, email address, date (all kind of formats), time (all kind of formats), credit card (all or your choice), zip code (US or custom), phone number, social security number, currency IP address, scientific notation, URL, custom (for the ones not listed :-)) (oh my god, this is too much!). When needed you can use patterns, t.i. something as regular expressions, but a lot easier (although not that powerful, but they’ll do for 99%). Also minimum and maximum number of characters, minimum and maximum values. I mean: they cover A LOT!
- Enforce patterns: meaning that if only numbers are allowed, you can force the user only to type numbers. Or if a space is wanted on the 3rd position, a space is added automatically. Cute!
- Hint: an example value is filled out for the user (but it isn’t considered a value, it’s just a placeholder.
- Validate on: you can choose to validate on submit (the default), on blur (when leaving the field) or on change (when you change the field value)
Input validation is extremely easy to add and edit
Everything just happens by selecting a field, insert spry validation and changing the properties. Under the hood a lot is going on, but at this phase you don’t have to worry about it, Dreamweaver does the hard work for you. Compare this to all the work that has to be done with the bare hands, even if you use a framework.
The look-and-feel of the validaton is easy to adjust.
Every type of field has its own css file, easy to recognize and with only a few rules in it. Changing just these rules changes your validation to just the way you want it. After that you can reuse these css files in all your applications!
I believe I have a strong case here and I intend to show a how-to in a next article.