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

<span id="sprycheckbox1">
	<input type="checkbox" name="checkbox1" value="1"/>
	<input type="checkbox" name="checkbox2" value="2"/>
	<span class="checkboxRequiredMsg">Please make a selection.</span>
</span>

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

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

.checkboxRequiredMsg, .checkboxMinSelectionsMsg, .checkboxMaxSelectionsMsg{
	display: none;
}
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

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

<span id="sprycheckbox1" class="checkboxRequiredState">
	<input type="checkbox" name="checkbox1" value="1"/>
	<input type="checkbox" name="checkbox2" value="2"/>
	<span class="checkboxRequiredMsg">Please make a selection.</span>
</span>

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

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