バリデーションエラーになった項目の見た目を変更するやり方のサンプルです。
HTMLでタグの見た目を操作するにはCSSを使うのが一般的です。 例えば「error」というクラスに対応するエントリをCSSで定義しておき、 エラーになった項目に対応するHTMLタグのclass属性に動的に「error」という値を追加することで、 エラーの時に項目の見た目を変更することができます。
Ymir+ZPTでは、条件が満たされた場合に動的にclass属性に値を追加するための仕組みとして、 decorate式とdecorate-by-notes式が提供されています。 以下で具体的にこの2つの式の使い方を説明します。
decorate式はtal:attributesの中でclass属性の値を設定するためだけに利用できる式で、 以下の構文で記述します:
decorate:条件 with [!]class属性に追加する値
「条件」にはtal:conditionに書くような条件式を書くことができます。
「class属性に追加する値」には文字列で値を書いて下さい。 なお値の直前に「!」をつけると、既存のclass属性が置換されます。
例えば項目「date」について、バリデーションエラーの時に動的にclass属性に「error」という値を追加するための記述例は以下の通りです:
<input type="text" name="date" tal:attributes="class decorate:notes/contains(date) with error" />
次の項目はyyyyMMdd形式の日付文字列を受け付けるフォームです。
最初はclass属性の値は「emphasized」(項目を太字で表示)ですが、 形式が異なる値を入力すると「error」が追加されて項目の背景色が変更されます(項目は太字のまま)。
<input type="text" name="date" tal:attributes="class decorate:notes/contains(date) with error" />
次はエラー時にclass属性の値を置換する例です。
形式が異なる値を入力するとclass属性の値が「error」で置き換えられて太字表示が抑制されます。
<input type="text" name="date" tal:attributes="class decorate:notes/contains(date) with !error" />
decorate-by-notes式はdecorate式とほぼ同じですが、メッセージ(Notes)表示に特化しています。 具体的には、decorate式の条件部に「notes/contains(NAME)」と書く代わりに単に「NAME」と書くことができます。 (逆に、普通の条件式を書くことはできません。)
decorate-by-notes:[カテゴリ名] with [!]class属性に追加する値
「カテゴリ名」で指定されたカテゴリに属するNoteが現在のNotesに存在する場合に、 指定された値がclass属性に追加されます。
カテゴリ名は省略することができます。 省略した場合、現在のNotesになんらかのメッセージが存在する場合に指定された値がclass属性に追加されます。
例えば項目「date」について、バリデーションエラーの時に動的にclass属性に「error」という値を追加するための記述例は以下の通りです:
<input type="text" name="date" tal:attributes="class decorate-by-notes:date with error" />
次の例はdecorate-by-notes式を使ってclass属性を動的に追加する例です。
次はエラー時にclass属性の値を置換する例です。
形式が異なる値を入力するとclass属性の値が「error」で置き換えられて太字表示が抑制されます。
<input type="text" name="date" tal:attributes="class decorate-by-notes:date with !error" />