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

Comments (9) Dec 17, 2007 10:37 AM Views: 2029

Related Entries

Comments

[Add Comment]
I was playing around with spry vaiidation the other day and I found out that the submit valiation will never fire if your form is wrapped like this

<table>
<form>
<tr>

thats BAD html I know, but its just funny how it brakes only the submit valiation
# Posted By Raul Riera | 12/17/07 12:10 PM
I also had problems (unable to) using Spry validation within a cfwindow pop up
# Posted By Raul Riera | 12/17/07 12:26 PM
It worked for me, thanks for the tutorial. Guess I gotta start learning me some Spry.

Next step, convince co-workers that ColdFusion/Spry is equal to or perhaps better than anything .net...gonna be tough but wish me luck.
# Posted By Darrell | 12/17/07 10:20 PM
I didnt meant that this example didnt work.
# Posted By Raul Riera | 12/17/07 11:19 PM
Great example Ray.

I was wondering if you could drop another spry example showing the use of combining textareavalidation with XHR Submit?
Im trying to create a basic one page for comment posting that will allow a user to enter a comment into the text area (use validation here), then submit using XHR.

They both work fine without the other in the mix, but once I put them together... boom.

Thanks.
# Posted By Sigepjedi | 2/6/08 11:45 AM
Here is a good Spry Example I found which uses both, a little different than they are shown separately: http://labs.adobe.com/technologies/spry/samples/fo...

Ive been able to get these to work together, and am now just trying to figure out how to display the new comment properly without page load. :-)
# Posted By Sigepjedi | 2/6/08 12:09 PM
I'll try to do a demo later this week. Please watch the main blog though as I'll probably forget to comment here again.
# Posted By Raymond Camden | 2/6/08 12:44 PM
I like the validation but i hate the placement of the validation. I hope they come up with a way (or someone clue's me into how) to have a form element in one location but have the error message show up in another. Say at the top of a form, or over on the side or just in another table cell not in the originating SPAN tag....
# Posted By jonese | 2/26/08 8:34 AM
That's not a bad idea. I'd imagine a 'bucket' div that is invisible, and on erorr, Spry would show it, and append errors to it.
# Posted By Raymond Camden | 2/26/08 8:44 AM
[Add Comment]