Spry Validation: Textarea
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:
http://www.coldfusionjedi.com/demos/spryform/textarea.html
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:
counterType:"chars_remaining"
This tells Spry to show the number of characters left. I'd use "chars_count" to show the total number of characters typed.
counterId:"my_counter_span"
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:
http://www.coldfusionjedi.com/demos/spryform/textarea2.html
Lastly, to see the complete docs for the Textarea validator, see the online version: http://labs.adobe.com/technologies/spry/articles/textarea_overview/index.html