Spry Validation: Textarea

This post is more than 2 years old.

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

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 Raul Riera posted on 12/17/2007 at 11:10 PM

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

Comment 2 by Raul Riera posted on 12/17/2007 at 11:26 PM

I also had problems (unable to) using Spry validation within a cfwindow pop up

Comment 3 by Darrell posted on 12/18/2007 at 9:20 AM

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.

Comment 4 by Raul Riera posted on 12/18/2007 at 10:19 AM

I didnt meant that this example didnt work.

Comment 5 by Sigepjedi posted on 2/6/2008 at 10:45 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.

Comment 6 by Sigepjedi posted on 2/6/2008 at 11:09 PM

Here is a good Spry Example I found which uses both, a little different than they are shown separately: http://labs.adobe.com/techn...

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. :-)

Comment 7 by Raymond Camden posted on 2/6/2008 at 11:44 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.

Comment 8 by jonese posted on 2/26/2008 at 7:34 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....

Comment 9 by Raymond Camden posted on 2/26/2008 at 7:44 PM

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.

Comment 10 by Colin posted on 12/14/2008 at 3:41 PM

Hi there

Is there any way in which the spry validation error could be shown in the text box or text area, like the hints are. I use CSS for the page layout and the current error messages do not show up in their correct location.

Comment 11 by Raymond Camden posted on 12/15/2008 at 2:20 AM

I don't think so. If you could run a custom JS function on error than it would be easy. I checked the docs and don't see this, but I didn't check for too long.

Comment 12 by Raymond Camden posted on 12/15/2008 at 2:20 AM

I don't think so. If you could run a custom JS function on error than it would be easy. I checked the docs and don't see this, but I didn't check for too long.

Comment 13 by Raymond Camden posted on 12/15/2008 at 2:21 AM

I don't think so. If you could run a custom JS function on error than it would be easy.

Comment 14 by Colin posted on 12/15/2008 at 2:55 AM

Thanks for looking. I was just wondering if t would be possible. But not sure if I would need it anyway as the hints re-appear if nothing is entered into the textbox and the user moves to another part of the form.

Comment 15 by Raymond Camden posted on 12/15/2008 at 2:56 AM

Sorry for the multiple comment post there.

Comment 16 by Ligia posted on 11/13/2009 at 11:39 PM

I was wondering if we could count words and not characters, does anybody know where I can find an example using Spry validation?
Mnay thanks!