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

<span id="spryselect1">
	<select name="select1" id="select1">
		<option>--Please select an item--</option>
		<option value="item1">Item 1</option>
		. . .
	</select>
	<span class="selectRequiredMsg">Please select an item.</span>
</span>

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

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

.selectRequiredMsg, .selectInvalidMsg {
	display: none;
}
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

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

<span id="spryselect1" class="selectRequiredState">
	<select name="select1" id="select1">
		<option>--Please select an item--</option>
		<option value="item1">Item 1</option>
		. . .
	</select>
	<span class="selectRequiredMsg">Please select an item.</span>
</span>

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

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