Create a span tag (or any other type of tag) to display the error message, and assign the appropriate class to it, as follows:

<span id="sprytextarea1">
	<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
	<span class="textareaRequiredMsg">Please enter a description</span>
</span>

The .textareaRequiredMsg rule is located in the SpryValidationTextarea.css file, and is set to display:none by default. When the widget enters a different state through user interaction, Spry applies the appropriate class —the state class—to the container of the widget. This action affects the error message class, and by extension, the appearance of the error message.

For example, the following shows a portion of the CSS from the SpryValidationTextarea.css file:

.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

By default, there is no state class applied to the widget container, so that when the page loads in a browser, the error message text in the preceding HTML code example only has the .textareaRequiredMsg class applied to it. (The property and value pair for this rule is display:none, so the message remains hidden.) If the user fails to enter text in a required text area, however, Spry applies the appropriate class to the widget container, as follows:

<span id="sprytextarea1" class="textareaRequiredState">
	<input type="text" name="mytextarea" id="mytextarea" />
	<span class="textareaRequiredMsg">Please enter a description</span>
</span>

In the CSS in the preceding code, you can see that the state rule with the contextual selector .textareaRequiredState . textareaRequiredMsg overrides the default error-message rule responsible for hiding the error message text. Thus, when Spry applies the state class to the widget container, the state rule determines the appearance of the widget, and displays the error message inline in red with a 1-pixel solid border.

Following is a list of default error-message classes and their descriptions. You can change these classes and rename them to anything you want. If you do so, don’t forget to change them in the contextual selector also.