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

<span id="sprytextfield1">
	<input type="text" name="mytextfield" id="mytextfield" />
	<span class="textfieldRequiredMsg">Please enter a description</span>
</span>

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

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

.textfieldRequiredMsg,
.textfieldInvalidFormatMsg,
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

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

<span id="sprytextfield1" class="textfieldRequiredState">
	<input type="text" name="mytextfield" id="mytextfield" />
	<span class="textfieldRequiredMsg">Please enter a description</span>
</span>

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

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