はじめに

こんにちは。テクノロジー&エンジニアリングセンターの羽部です。

今回は、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 の「表示—継承」に準拠しています。