IM-BloomMaker コンテンツ種別「imds」で入力規則エラーを設定する方法

2025年10月6日 2025年10月6日

dev-portal_admin

この CookBook では、IM-BloomMaker のコンテンツ種別「imds」で以下の入力規則エラーの設定方法を紹介します。

複数の入力部品をまとめてエラーを設定する
それぞれの入力部品ごとにエラーを設定する

intra-mart Accel Platform 2024 Spring より前のバージョンでは、設定ができないので注意してください。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2024 Spring 版以降でインポートできます。

IM-BloomMaker インポートデータ：cookbook245044_im_bloommaker-data.zip

BloomMaker のインポート機能を利用してインポートしてください。

前提条件

この CookBook の手順をお手元の環境で実施する場合は、BloomMaker で以下のコンテンツを作成して使用してください。

デザイナのタイプ：デベロップモード
テンプレート：使用しない
コンテンツ種別：imds

レシピ

1. 複数の入力部品をまとめてエラーを設定する

変数の作成

(1) 変数タブの「JSON形式で編集」アイコンをクリックし、以下のJSONを張り付けてください。

{
  "year": "",
  "month": "",
  "year2": "",
  "month2": "",
  "error": "",
  "yearOptions": [
    "",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025"
  ],
  "monthOptions": [
    "",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12"
  ]
}

(2) 変数タブから $variable.year の変数エディタを開き、入力規則の 必須 にチェックをつけます。

(3) 同様に、以下の変数の変数エディタを開き、入力規則の 必須 にチェックをつけます。

$variable.month
$variable.year2
$variable.month2
$variable.error

アクションの作成

バリデーションを実施するアクションを作成します。

(1) アクションタブの「新規作成」アイコンをクリックしてアクションエディタを開きます。

(2) 標準カテゴリから 変数⚪︎に⚪︎を代入する を追加します。

(3) 変数に $variable.error を設定し、値に ok を設定します。

(4) 実行条件タブの標準カテゴリから 変数⚪︎が入力規則に則しているとき を２つ配置します。

(5) １つ目の実行条件の変数に $variable.year を設定します。

(6) ２つ目の実行条件の変数に $variable.month を設定します。

(7) アクションタブの標準カテゴリから再度 変数⚪︎に⚪︎を代入する を追加します。

(8) 変数に $variable.error を設定し、値に空文字を設定します。

(9) 実行条件タブの標準カテゴリから 変数⚪︎が入力規則に則していないとき を２つ配置します。

(10) １つ目の実行条件の変数に $variable.year を設定します。

(11) ２つ目の実行条件の変数に $variable.month を設定します。

(12) 「いずれかの条件に一致」プルダウンを選択します。

(13) アクション名を check に変更して決定します。

レイアウトの作成

(1) コンテナページに見出しレベル３（レイアウト（imds）カテゴリ）を配置します。

(2) 見出しの内容を Grouped Validation に設定します。

(3) フィールドグループ（フォーム部品（imds）カテゴリ）を配置します。

(4) フィールドグループボディ配下のフィールドの showLabel プロパティのチェックを外します。

(5) フィールドグループボディ配下のフィールドの showValidationErrorMessage プロパティにチェックをつけます。

(6) フィールドコンテンツ配下にプルダウン（フォーム部品（imds）カテゴリ）を２つ配置します。

左側のプルダウン要素の設定

配置した２つのプルダウンの左側のプルダウン要素の設定をします。

(7) labels プロパティの変数値に $variable.yearOptions を指定します。

(8) values プロパティの変数値に $variable.yearOptions を指定します。

(9) value プロパティの変数値に $variable.year を指定します。

(10) 入力値変更時イベントに check を指定します。

右側のプルダウン要素の設定

同様に、配置した２つのプルダウンの右側のプルダウン要素の設定をします。

(11) labels プロパティの変数値に $variable.monthOptions を指定します。

(12) values プロパティの変数値に $variable.monthOptions を指定します。

(13) value プロパティの変数値に $variable.month を指定します。

(14) 入力値変更時イベントに check を指定します。

入力エラーメッセージの設定

プルダウンの設定が完了したら、入力エラーメッセージの設定をします。

(15) variable プロパティに $variable.error を指定します。

(16) caption プロパティに 年と月（任意の値）を指定します。

コンテンツを保存して、プレビューで確認してみましょう。

年と月、どちらかが未選択の場合にはエラーが表示されるようになります。