前回はForm.Validater.Inlineのバリデータの種類や指定できるオプションを説明しましたが、
今回はより実践的なフォームの装飾の話になります。

Form.Validate.Inlineを適用したフォームでは、エラーメッセージ、入力チェックをパスしたフィールド、入力チェックに引っかかったフィールドにそれぞれ装飾用のclass属性が割り当てられます。

それぞれの対応は下記を参考にしてください。

では、実際のHTMLはどのような状態になっているのでしょうか？
なかなかイメージしにくいと思いますのでHTMLを記載します。
各々、次のような状態になっています。

入力フィールド

入力エラーなしのフィールド
class属性にvalidation-passedが割り当てられている

<input type="text" class="required validation-passed" size="60" value="" name="required">

入力エラーありのフィールド
class属性にvalidation-failedが割り当てられている

<input type="text" class="validate-numeric validation-failed" size="20" value="" name="validate-numeric" id="input_validate-numeric">

警告状態のフィールド
class属性にwarningが割り当てられている

<input type="text" class="warn-validate-url warning" size="60" value="" name="validate-url" id="input_validate-url">

エラー／警告メッセージ

入力エラーメッセージ
class属性にvalidation-adviceが割り当てられ、入力フィールドの直下に挿入されている

<input type="text" class="validate-numeric validation-failed" size="20" value="" name="validate-numeric" id="input_validate-numeric">
<div style="display: block;" id="advice-validate-numeric-input_validate-numeric" class="validation-advice">入力できるのは数値だけです。(例: "1", "1.1", "-1", "-1.1"....)</div>

警告メッセージ
class属性にwarning-adviceが割り当てられ、入力フィールドの直下に挿入されている

<input type="text" class="warn-validate-url warning" size="60" value="" name="validate-url" id="input_validate-url">
<div style="display: block;" id="advice-validate-url-input_validate-url" class="warning-advice">URLアドレスに誤りがあります。</div>

では、状態がわかったので今度はこれを元にスタイル付けしていきます。
ここでは次のようにします。

• エラー／警告メッセージはアイコンを表示してわかりやすくする。
• 入力フィールドの状態に合わせてそれぞれ背景を指定してわかりやすくする。

入力エラーメッセージ

警告メッセージ

実際のスタイルは次のようになります。

.validation-advice, .warning-advice {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 8px 10px;
	padding-left: 35px;
	color: #6b1919;
	-moz-box-shadow: 1px 1px 2px #cccccc;
	margin-top: 5px;
}

.validation-advice {
	background: #eeeeee url(skin/bgi_error_icon.gif) no-repeat 5px center;
}

.warning-advice {
	background: #eeeeee url(skin/bgi_warning.gif) no-repeat 5px center;
}

.validation-failed {
	background: #fff2f0;
}

.warning {
	background: #dcdcdc;
}

最後にこれまでのデータを公開しますので、ダウンロードして改造するなりご自由に利用してください。
次回はForm.Validater.Extraについての説明を掲載します。

example file: form-validater-style.zip

以上で終了です。