It's been a while since I reviewed a Spry Validation example, so I thought I'd take a few minutes this morning to demonstrate another example - the Textarea validation. As with the other validation types (I've linked to my examples below), you begin by including a CSS and JavaScript library:

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

You next take your textarea, and wrap it in a span:

<span id="sprytextarea1"> <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea> </span>

As with the other validation types, the span wrap acts like a 'marker' to Spry to help it work with your form field and validation.

Next we "enable" validation:

<script type="text/javascript"> var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1"); </script>

The ID passed to ValidationTextarea is the ID used for the span that wraps the textarea. As before, we can add a simple validation message to require the textarea:

<span class="textareaRequiredMsg">A value is required.</span>

Spry automatically hides/shows this span based on the value in the textarea. You can see a super exciting demo of this here:

Where things get interesting are all the little options you have with validation. I bet the one folks will use most is the maxChars option. As you can guess, this lets you set a maximum number of characters. You can enable this like so:

var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {maxChars:100});

What's interesting is that there doesn't seem to be a corresponding span error class for this. I tried:

<span class="textareaMaxCharsMsg">You typed more than 100 characters!</span>

But it never showed up. Instead - Spry blocked the characters. When I tried to type more than 100, I was stopped. If I pasted a big block, it got cropped. I guess the team figured there was no need to support a message for something you couldn't do.

There is a minChars option as well, and the message does instead work for that:

<span class="textareaMinCharsMsg">You need to type 5 chars!</span>

Spry also supports a counter, which is nice. You can either show people how many characters they have left, or show them how many they have typed, or both! Here is a simple example of showing the number of characters. First, we add a new span:

Chars Remaining: <span id="my_counter_span"></span>

Note the ID. Now when I create my validation object, I enable the character counter with two options:


This tells Spry to show the number of characters left. I'd use "chars_count" to show the total number of characters typed.


This simply tells Spry what span id to update. Simple, right?

Another cool little feature is "hint" - the hint attribute lets you put a hint inside the textarea telling the user what to type:

hint:"Enter Wisdom"

On initially loading the form, the user would see "Enter Wisdom" in the textarea. As soon as they click, the text goes away.

You can see a demo of all of the above here:

Lastly, to see the complete docs for the Textarea validator, see the online version: