投稿日
Nablarchでの単項目や項目間バリデーションのエラーメッセージ表示やハイライトの方法
はじめに
こんにちは。テクノロジー&エンジニアリングセンターの羽部です。
今回は、Nablarch解説書に記載されているけれど、埋もれてしまって探しにくい情報を掘り起こして説明するのを目的に記事を書きました。
Nablarchで単項目や項目間のバリデーションを行ってエラーがあれば、入力欄の近くにメッセージを表示したり、該当欄をハイライト表示させたりしたいですよね。
基本的なエラーメッセージの表示自体はややこしくはありません。しかし、項目間バリデーションの場合などは、少し悩むところがあります。入力項目の近くにどうやって表示するか、いくつかの項目をまとめてハイライトさせるにはどうするかといったことです。
本記事では、ウェブアプリケーションでエラーメッセージを表示する基本的な方法と、上記の実現方法を紹介します。
なお、Nablarchはバリデーション(入力値のチェック)を行う方法として、以下の2種類の機能を提供しています。
本記事では、Nablarchが推奨するBean Validationを対象とします。
単項目や項目間バリデーションのエラーメッセージ表示方法
まず、エラーメッセージの表示方法に入る前に、単項目や項目間バリデーションがどんなバリデーションか示しておきましょう。
種類 | 説明 |
---|---|
単項目 | 入力値の桁数や文字種、形式などが妥当なものかチェックする。 |
項目間 | 2つ以上の入力値の関係が妥当かチェックする。例えば、パスワード欄とパスワード(確認)欄の2つの入力値が一致するかなど。 |
実装個所で言うと、フォームクラスに実装するバリデーションです。
では本題。 単項目バリデーションや項目間バリデーションでエラーが発生した場合の、エラーメッセージの表示方法です。カスタムタグのerror
タグを使用します。
次のようになります。
<n:text
name="loginId"
errorCss="input-error" />
<n:error
name="loginId"
errorCss="message-error" />
ポイントは、入力部品(今回はtext
タグ)のname
属性の値と、error
タグのname
属性の値を合わせることです。なお、エラーメッセージが表示されるとき、入力部品に適用されるCSSはerrorCss
属性に指定したものとなります。
項目間バリデーションの場合のerror
タグのname
属性は、メソッド名(を少し変更したもの)になります。例えば、項目間バリデーションのメソッド名がisValidPeriod
であれば、name
属性の値は、メソッド名の頭のis
を除いた、validPeriod
になります。
1つのエラーで複数項目を同時にハイライトする方法
バリデーションエラーが1つ発生した時に、同時に複数の入力欄をハイライトさせる方法です。 項目間バリデーションに関係する複数の項目に対して同時に、errorCss
属性の値を適用することで実現できます。
入力部品のnameAlias
属性を使います。
<n:text
name="startDate"
nameAlias="validPeriod"
errorCss="input-error" />
<n:text
name="endDate"
nameAlias="validPeriod"
errorCss="input-error" />
<n:error
name="validPeriod"
errorCss="message-error" />
入力部品はnameAlias
属性を使うことで、名前の別名を定義できます。これを利用して項目間バリデーションに関係する入力部品のnameAlias
属性に、項目間バリデーションのname
属性の値を指定します。これで、エラーが発生した場合に、まとめてerrorCss
属性で指定したCSSを適用できます。
おわりに
いかがだったでしょうか。エラーメッセージの表示方法について、整理ができたでしょうか。皆さんの開発の一助となれば幸いです。
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。