入力フォームの検証

IM-BloomMakerのデザイン編集画面で作成した入力フォームに、バリデーション（入力規則の検証）処理を実装する例を紹介します。

IM-BloomMakerを使ってユーザの入力値を検証するには、以下の方法があります。

• 入力値ごとに検証するための条件を設定する
• エンティティのまとまりで入力値を検証する（IM-Repositoryを利用している場合）

ここでは、マスタメンテナンステンプレートでの検証設定を例に、実装方法の一例を紹介しています。

※マスタメンテナンステンプレートでの実装は、IM-Repositoryのエンティティ機能を利用した場合の検証方法ですが、エンティティを利用しない検証方法も併記して説明しています。

完成イメージ

備考

このページに掲載している画面は2024 Autumn（Jasmine）環境のものです。お使いのバージョンによっては外観や内容が異なる場合があります。

説明

ユーザの入力値を検証する処理は、フォームを送信するアクションに設定する必要があります。以下のような流れで設定します。

1. 「変数をエンティティからインポートする」または「入力値を格納する変数ごとに入力規則を設定する」
   
2. 入力フォームのエレメントに変数を紐付ける
3. 入力規則のエラーメッセージを表示できるようにエレメントを設定する
4. フォームを送信するアクションに、入力規則のエラーメッセージ表示条件、フォーム送信の条件を設定する

サンプル資材

このページでは、Accel Studioの業務テンプレートにあるマスタメンテナンステンプレートで作成できる資材を例に説明しています。

備考

上記資材の内容を確認するには以下の手順で操作します。

サイトマップ＞Accel Studio＞アプリケーション作成＞業務テンプレート一覧の画面で、ベーステンプレートにあるマスタメンテナンスから作成すると、Accel Studio＞アプリケーション管理＞アプリケーション一覧＞自動生成されたアプリケーションに資材が表示されます。

実装イメージ

画面コンテンツの登録・編集・参照画面から登録画面の実装例をもとに紹介します。以下の順に設定していくことで、フォーム送信時の検証処理を実装できます。

• 入力値を格納する変数に入力規則を設定する
• 入力規則のエラーメッセージを設定する
• アクションを設定する

ヒント

以降で説明する内容の詳細な概要・手順については、以下の記事を参考にしてください。

• IM-BloomMaker 画面操作後に入力規則のチェックが行われるフォームの作成
• BloomMaker 入力規則エラーメッセージエレメントの使い方
• IM-Repositoryのエンティティについて
  • はじめてのIM-Repository
  • 用途に応じたエンティティの設定とは？

入力値を格納する変数に入力規則を設定する

1. 変数に入力規則を設定する

• マスタメンテナンステンプレートのように変数をエンティティからインポートして作成した場合は、入力規則の設定がエンティティ側の設定を参照するようになるため設定は不要です。ただし、入力必須のフォームについては、入力規則で必須にチェックマークを付けておく必要があります。
  ※$variable.state.entity配下の変数がエンティティからインポートして作成されたものです。
  

備考

エンティティを利用する場合は、事前にエンティティを構成している辞書項目に制約を設定しておく必要があります。概要と詳細については、以下の記事を参照してください。

• 辞書項目の設定を使い分けるコツ

2. 入力フォームのエレメントで、エレメント固有のvalueプロパティに上記の変数を設定する

入力規則のエラーメッセージを設定する

入力値にエラーがあった場合、入力規則のエラーメッセージを表示する設定をします。

1. フィールド（Bulma/imds）またはフィールドグループ（imdsのみ）エレメントで、エレメント固有のshowValidationErrorMessageプロパティにチェックマークを付ける
2. 入力規則エラーメッセージエレメントがデザイン画面上に表示されることを確認する

アクションを設定する

入力規則のエラーメッセージ表示条件と、フォーム送信の条件をアクションに設定します。登録画面の場合、登録ボタンのアクションに設定しています。

1. アクションエディタで、標準＞入力規則エラーを表示するアクションを追加する

2. Bulmaまたはimds＞メッセージ〇を表示するアクションを追加する

• また、実行条件から変数の内容を評価する条件をアクションに追加します。

3. 標準＞空処理アクションを追加する

• 実行後にアクションを終了するに変更します。
• 実行条件で変数の内容を評価する条件をアクションに追加します。

備考

• 複数の入力フィールドについて、日付の開始と終了の整合性や、合計値の検証などの相関チェックをする場合は、カスタムスクリプトを使うことで実現できます。
• 入力フィールドによっては、エレメント固有のプロパティ内に最大文字数（maxLength）や最小値（min）、最大値（max）などを設定できますが、これらはユーザ入力を制限したい場合に利用する設定です。