The Spry Textarea Validation Widget is used to validate a textarea, mostly checking for content existence or content length.
The widget structure is as follows:
<widget container>
<input textarea>
<message container(s)>
</widget container>
The Textarea Validation Widget supports one text area per widget.
The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.
Using the provided files, the default mark up is:
<span id="comments">
<textarea name="textarea3" id="textarea3" cols="32" rows="5"></textarea>
<span class="textareaRequiredMsg">The value is required.</span> </span>
Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.
<script type="text/javascript">
var comments = new Spry.Widget.ValidationTextarea("comments");
</script>
A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.
<script type="text/javascript"> var widgetname = new Spry.Widget.ValidationTextarea("id of widget container"); </script>
Constructor options allow users to specify certain attributes of the widget.
Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).
<script type="text/javascript">
var widgetname = new Spry.Widget.ValidationTextarea("id of widget container",{option1:value, option2:value, option3:"value"});
</script>
| Option | Values | Default | Description |
|---|---|---|---|
| counterID | string | null | This options specifies the markup container that will display the couter. It should be an empty container within the widget. |
| counterType | 'chars_count' or 'chars_remaining' | null | Determines whether the counter counts the number of typed characters or counts the number of characters remaining before hitting the maxChars value. 'chars_remaing' must be used in conjuction with the 'maxChars' option. |
| hint | string | null | The defined string will show in the textarea when the page loads. It will be removed when the user starts typing within the field. |
| isRequired | true or false | true | Determines whether any checkboxes need to be checked. Set to 'false' to bypass validation. |
| maxChars | number | null | Determines the maximum number of characters that can be used with the textarea. |
| minChars | number | null | Determines the minimum number of characters that can be used with the textarea. |
| useCharacterMasking | true or false | null | Used only in conjunction with 'maxChars', this option will prevent the user from typing in more than the maximum number of characters. |
| validateOn | "blur", "change" | submit | The widget always validates onSubmit. onBlur and onChange can be added with this option. Both can be applied with an array ['blur', 'change'] |
requiredClass |
class name | null | Overrides the "textareaRequiredState" built-in value . |
validClass |
class name | null | Overrides the "textareaValidState" built-in value. |
focusClass |
class name | null | Overrides the "textareaFocusState" built-in value.. |
invalidCharsMinClass |
class name | null | Overrides the "textareaMinCharsState" built-in value. |
invalidCharsMaxClass |
class name | null | Overrides the "textareaMaxCharsState" built-in value. |
textareaFlashClass |
class name | null | Overrides the "textareaFlashState" built-in value. |
hintClass |
class name | null | Overrides the "textareaHintState" built-in value. |
<script type="text/javascript">
var textarea1 = new Spry.Widget.ValidationTextarea("textarea1",{isRequired:false, minChars:20, maxChars:50, validateOn:['blur','change']});
</script>
Recall that javascript is case sensitive.
Reset the widget to its original state.
widgetName.reset();
<a href="#" onclick="textarea1.reset(); return false;">Reset Textarea</a>
Validates the current state of the widget.
widgetName.validate();
<a href="#" onclick="textarea1.validate(); return false;">Validate Textarea</a>
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.