Playing with form validation in Spry

This post is more than 2 years old.

As much as I love working with Spry, I haven't spent a lot of time playing with the widgets or effects. Outside of the tabs - I just wasn't that interested. During my Spry presentation to the OC CFUG this week, I decided it was time to take a look at the form validation widgets that ship with Spry. This morning I looked specifically at the checkbox widget.

Widgets in Spry all follow a basic setup - whether you are using UI-ish widgets like tabs, or validation widgets like the checkbox. You begin with your content, and then "enable" the widget with a line of JavaScript. This works due to the loading of a JavaScript library and a CSS file as well.

Let's take a look at a simple example. The following is a very basic HTML form:

<form>

<b>Please select your favorite monsters</b>:<br /> <input type="checkbox" name="monsters" value="blast-ended skrewt">Blast-Ended Skrewt<br /> <input type="checkbox" name="monsters" value="augurey">Augurey<br /> <input type="checkbox" name="monsters" value="ashwinder">Ashwinder<br /> <input type="checkbox" name="monsters" value="acromantula">Acromantula<br /> <input type="checkbox" name="monsters" value="doxy">Doxy<br /> <input type="checkbox" name="monsters" value="nogtail">Nogtail<br /> <input type="submit"> </form>

The form has one set of six checkboxes. Now let's enable basic validation using Spry. The first thing I need to do is load the resources Spry needs:

<script src="/spryjs/SpryValidationCheckbox.js" type="text/javascript"></script> <link href="/sprycss/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />

Now I need to help Spry know what checkboxes are going to be validated. To do that - I'm going to wrap the checkboxes in a span:

<span id="mycheckboxes"> <input type="checkbox" name="monsters" value="blast-ended skrewt">Blast-Ended Skrewt<br /> <input type="checkbox" name="monsters" value="augurey">Augurey<br /> <input type="checkbox" name="monsters" value="ashwinder">Ashwinder<br /> <input type="checkbox" name="monsters" value="acromantula">Acromantula<br /> <input type="checkbox" name="monsters" value="doxy">Doxy<br /> <input type="checkbox" name="monsters" value="nogtail">Nogtail<br /> </span>

Then I simply enable the validation with a line of JavaScript:

<script type="text/javascript"> var sprycb = new Spry.Widget.ValidationCheckbox("mycheckboxes"); </script>

So we aren't quite done yet. How do we handle errors? Typically you use a message of some sort. What I need to do is create a message inside a specifically named CSS class. Here is an example:

<span class="checkboxRequiredMsg">Please make a selection.<br /></span>

The class I used above is recognized by Spry. So when loaded - the message is automatically hidden. And that's it. When I try to submit the form now, Spry will check my checkboxes, and if one isn't selected, it will take that previously hidden message and reveal it. Here is the complete source of the new version:

<html>

<head> <script src="/spryjs/SpryValidationCheckbox.js" type="text/javascript"></script> <link href="/sprycss/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" /> </head>

<body>

<form>

<b>Please select your favorite monsters</b>:<br /> <span id="mycheckboxes"> <input type="checkbox" name="monsters" value="blast-ended skrewt">Blast-Ended Skrewt<br /> <input type="checkbox" name="monsters" value="augurey">Augurey<br /> <input type="checkbox" name="monsters" value="ashwinder">Ashwinder<br /> <input type="checkbox" name="monsters" value="acromantula">Acromantula<br /> <input type="checkbox" name="monsters" value="doxy">Doxy<br /> <input type="checkbox" name="monsters" value="nogtail">Nogtail<br /> <span class="checkboxRequiredMsg">Please make a selection.<br /></span> </span> <input type="submit"> </form>

<script type="text/javascript"> var sprycb = new Spry.Widget.ValidationCheckbox("mycheckboxes"); </script>

</body> </html>

And you can test this here. In case you are curious - yes - you can modify the look and feel of the error. You can also modify when the validation occurs. By default it is on submit, but you can also run it on blur or change. Check the docs for more information.

While this is nice and all - so far it isn't too terribly exciting. But the checkbox validation also has another cool feature. You can specify a minimum and maximum number of required checkboxes. All you need to do is specify the option when enabling the validation:

<script type="text/javascript"> var sprycb = new Spry.Widget.ValidationCheckbox("mycheckboxes",{minSelections:2}); </script>

This example specifies that a minimum of two checkboxes must be selected. As I said above, I can also do a maximum as well. In order to handle this validation, you need to add a new error message. Once again there is a specially named CSS class you can use:

<span class="checkboxMinSelectionsMsg">Please pick at least two selections.<br /></span>

Here is a complete example:

<html>

<head> <script src="/spryjs/SpryValidationCheckbox.js" type="text/javascript"></script> <link href="/sprycss/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" /> </head>

<body>

<form>

<b>Please select your favorite monsters (pick 2 minimum)</b>:<br /> <span id="mycheckboxes"> <input type="checkbox" name="monsters" value="blast-ended skrewt">Blast-Ended Skrewt<br /> <input type="checkbox" name="monsters" value="augurey">Augurey<br /> <input type="checkbox" name="monsters" value="ashwinder">Ashwinder<br /> <input type="checkbox" name="monsters" value="acromantula">Acromantula<br /> <input type="checkbox" name="monsters" value="doxy">Doxy<br /> <input type="checkbox" name="monsters" value="nogtail">Nogtail<br /> <span class="checkboxRequiredMsg">Please make a selection.<br /></span> <span class="checkboxMinSelectionsMsg">Please pick at least two selections.<br /></span> </span> <input type="submit"> </form>

<script type="text/javascript"> var sprycb = new Spry.Widget.ValidationCheckbox("mycheckboxes",{minSelections:2}); </script>

</body> </html>

And the online demo may be found here.

So now that I've finally played with it a bit - I like it. Especially the min/max support.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by existdissolve posted on 10/20/2007 at 8:47 PM

One of the Spry widgets I've really come to like is the Password feature set. Spry makes it incredibly easy to place custom rules (such as length, special characters, number of particular value types, etc.) on password fields.

Obviously, server-side checking is still necessary; however, it is nice to be able to provide a more user-friendly and alert-as-you-go experience for those who aren't trying to break things just for the heck of it. Spry enables the addition of an entire second layer and requires very little time above and beyond what one should already be doing.

Very cool stuff!

Comment 2 by Raymond Camden posted on 10/20/2007 at 8:55 PM

Cool. I'll take a look at - and blog on - the password one next.

Comment 3 by DK posted on 10/20/2007 at 10:19 PM

I had turned most of the spry form validation widgets into custom tags awhile back. I had added opt. attributes for help and debugging at one point. Recently I've been trying to do something similar with jQuery though (smaller footprint).

http://cfspryforms.riaforge...

Comment 4 by David Herman posted on 10/21/2007 at 12:56 AM

I've actually come to dislike purely clientside validation. Since you still need server side validation it means your business validation logic exists in two places, and then needs to be maintained in two places. What I've done in the past is use my server side validation to validate my client side data through ajax. It sounds kind of hokey, but it lets you share your validation with the serverside. It's especially usefull when you're doing ajax validation anyway (user name already exists). I'm curious if spry has anyway to hand off the validation to a boolean method that you can then do whatever you want (ie: send to the server)

Comment 5 by Raymond Camden posted on 10/21/2007 at 3:26 AM

David, in the past I've definitely felt the same - but with Spry making it so easy - I'm reconsidering.

Comment 6 by existdissolve posted on 10/21/2007 at 2:41 PM

David--

I agree that it can be a pain. However, I think it is becoming increasingly necessary.

For example, I personally give sites very few chances with user interfaces. If I have to correct errors AFTER filling out forms AND submitting them, I lose patience very quickly and am less likely to bother continuing with it.

In the past, people may have been accustomed to this kind of "go-back-and-correct-the-errors" kind of workflow, but with the incredible proliferation of AJAX across the web, newer users are probably endowed with a significantly smaller toleration for such processes, expecting live notifications of potential problems.

This is one of the reasons I love Spry so much. Whether one is looking for pure client-side validation, or a fusion of the two like you have suggested (and which I use for the very example you cited), Spry makes the addition of this second "layer" very intuitive and coding-time-friendly. It is so easy to implement that one can still concentrate on the still extremely important server-side validations without consuming a lot of precious coding time on wrangling with Javascript.

Comment 7 by David Herman posted on 10/21/2007 at 5:26 PM

I'm a big believer of the DRY (don't repeat yourself) concept. And yes spry makes it easy to validate things on the client side but in experience, people change their minds about as often as Ray says that he loves CF.
So now we have to go change the code on the client side and then go change the validation on the server side, if we remember. The problem then(when we forget) is that your client side validation checks to see that 2 fields are required and your serverside says that 3 are required, and now your validation doesn't match.

One could argue that testing could and should catch that, but we all know how much people love to test.

In reality I love client side validation, I just want the logic for it on the server.

Comment 8 by O?uz Demirkap? posted on 10/22/2007 at 4:43 AM
Comment 9 by Jeff Self posted on 10/22/2007 at 4:59 PM

Anybody been able to get Spry validation to work inside a cfwindow? I've converted some forms to run inside of a cfwindow and now the Spry validation doesn't work. It runs fine when I call the form itself. I've tried calling the spry validation from the page containing the cfwindow. I've tried calling the spry validation from the page containing the form and it doesn't work in either one. But like I said, if I can the page containing the form as a standalone page rather than from within the cfwindow, the spry validation works.

Comment 10 by Raymond Camden posted on 10/22/2007 at 5:25 PM

Jeff - all JS in cf8 UI stuff has to be of the form, foo = function(), not function foo. I'd be willing to bet that is why Spry won't work.