Spry

Insert the Validation Text Area widget

  1. Locate the SpryValidationTextarea.js file and add it to your web site. You can find the SpryValidationTextarea.js file in the widgets/textareavalidation directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

    For example, create a folder called SpryAssets in the root folder of your web site, and upload the SpryValidationTextarea.js file to it. The SpryValidationTextarea.js file contains all of the information necessary for making the Text Area widget interactive.

  2. Locate the SpryValidationTextarea.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
  3. Open the web page to add the Text Area widget to and link the SpryValidationTextarea.js file to the page by inserting the following script tag in the page’s head tag: 
    <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>

    Make sure that the file path to the SpryValidationTextarea.js file is correct. This path varies depending on where you’ve placed the file in your web site.

  4. Link the SpryValidationTextarea.css file to your web page by inserting the following link tag in the page’s head tag: 
    <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

    Make sure that the file path to the SpryValidationTextarea.css file is correct. This path varies depending on where you’ve placed the file in your web site.

  5. Add a text area to the page and give it a name and a unique ID: 
    <textarea name="mytextarea" id="textarea"></textarea>
  6. Add a container around the text area by inserting span tags around the <textarea> tags, and assigning the widget a unique ID, as follows: 
    <span id="sprytextarea1">
	<textarea name="mytextarea"></textarea>
</span>
  7. Initialize the text area object by inserting the following script block after the HTML code for the widget: 
    <script type="text/javascript">
	var ta1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
</script>

    The new JavaScript operator initializes the Text Area widget object, and transforms the span tag content with the ID of sprytextarea1 from static HTML code into an interactive text field object. The Spry.Widget.ValidationTextarea method is a constructor in the Spry framework that creates text area objects. The information necessary to initialize the object is contained in the JavaScript library, SpryValidationTextarea.js, that you linked to at the beginning of this procedure.

    Make sure that the ID of the text area’s container span tag matches the ID parameter you specified in the Spry.Widgets.ValidationTextarea method. Make sure that the JavaScript call comes after the HTML code for the widget.

  8. Save the page.

    The complete code looks as follows:

    <head> 
... 
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
	<form id="form1" name="form1" method="post" action="">
		<span id="sprytextarea1">
			<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
		</span>
	</form>
<script type="text/javascript">
var ta1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
</script>
</body>