Input validation for the web made easy with Adobe’s Spry javascript framework for Ajax – part 1

Adobe Spry Ajax framework

I know there’s Dojo. I know there’s Prototype. jQuery. There are a lot of JavaScript libraries available, and most of them have objects dealing with input validation. I saw Rocky’s session about Dojo on LotuSphere. An inspiring session that got me started delving into it, but I found myself a bit disappointed about how it looks. There are 3 themes available that change the look and feel a bit, but they all look rather ugly to me. Creating a theme of your own, so they tell, is a huge work (and that’s why there are only 3 themes).

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:

Spry properties in Dreamweaver CS3

  • 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.

5 Comments

  1. If you are looking for a JS framework that has some really nice looking widgets then you should really check out Ext (if you haven’t already). I know I’m partial to it since Rich Waters and I are using it to build a domino version of Ext for domino web developers to use.

    Here are some links to check out.
    http://extjs.com
    http://www.extjs.com/deploy/dev/examples/

    Reply
  2. I’ve been using the standard dojo widgits selectively, so that I can control the styling without having to create a complete theme. I blogged about using the dojo dialog recently and the next SnTT will on the the stack container. in a nutshell, I’ve implemented a multi-page form which has the websites look and nothing like the standard dojo look. So it is possible to use dojo widgits with your own styles without going to the trouble of creating a theme. This does depend on each widgit. However, for those widgts that use one of the three themes (like dialog) you can override the style for just that widgit (see overriding and combining themes).
    So, unless you plan on using every widgit you don’t need to create a theme.

    Reply
  3. Here’s waiting for the next article, and raising a hand for “If there’s enough interest, a third article …”

    Reply
  4. Hi Martin, here is one more full interest… I am new to web-development and I have all these tools (Dreamweaver, fireworks, etc) but not the knowledge. Any topic that will help to use these tools to make domino web development easier/better would be great!

    Reply
  5. @Jack: I hear a lot of good things about Ext.nd and I definitely want to put my head in that too. You did a wonderful job there! About the input validation: I looked at the examples, but didn’t find validation?

    @Tony: thanks for the tip! This opens some doors for me to Dojo. Keep in mind that I don’t want to compete with Dojo or any other JS library here, I just want to show an alternative for the existing libraries and techniques.

    @Sherwmin & Basir: thanks for the interest and stay tuned ;-)

    Reply

Trackbacks/Pingbacks

  1. kociquadhie.webnode.com - Zdcal calendar agenda period 2.1.111 Oh my goodness! Incredible article dude! Thank you so much, However I am having difficulties with …

Submit a Comment

Your email address will not be published. Required fields are marked *

1 + = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>