エラーメッセージを表示するための span タグ (またはその他の種類のタグ) を作成し、次のように適切なクラスを割り当てます。

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

.textareaRequiredMsg ルールは "SpryValidationTextarea.css" ファイルに配置され、デフォルトでは display:none に設定されています。 ユーザーとのインタラクションの中で Widget によって別の状態が入力されると、Spry により、この Widget のコンテナに適切なクラス (状態クラス) が適用されます。 このアクションは、エラーメッセージクラスに影響を与えるので、結果として、エラーメッセージの外観に影響します。

たとえば、"SpryValidationTextarea.css" ファイルの CSS の一部は、次のようになります。

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

デフォルトでは、状態クラスは Widget コンテナに適用されていないため、ページがブラウザに読み込まれるときに、上の HTML コード例のエラーメッセージテキストに適用されているのは .textareaRequiredMsg クラスだけです。 このルールのプロパティと値のペアは display:none なので、メッセージは非表示のままになります。 ただし、ユーザーが必須テキスト領域にテキストを入力しない場合は、次のように Spry によって Widget コンテナに適切なクラスが適用されます。

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

上のコードの CSS では、コンテキストセレクタである .textareaRequiredState . textareaRequiredMsg を持つ状態ルールによって、エラーメッセージテキストを非表示にするデフォルトのエラーメッセージルールが上書きされます。 このため、Spry によって状態クラスが Widget コンテナに適用されると、状態ルールによって Widget の外観が決定され、エラーメッセージは 1 ピクセルの実線のボーダーに囲まれて赤でインラインで表示されます。

デフォルトのエラーメッセージクラスとその説明のリストを次に示します。 これらのクラスを変更して、任意の名前に変更することができます。 その場合は、必ずコンテキストセレクタも変更してください。