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
Archived Comments
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
I also had problems (unable to) using Spry validation within a cfwindow pop up
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.
I didnt meant that this example didnt work.
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.
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. :-)
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.
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....
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.
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.
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.
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.
I don't think so. If you could run a custom JS function on error than it would be easy.
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.
Sorry for the multiple comment post there.
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!