レコード照合フォームブロックのソース解説

レコード照合フォームブロックのソースの構造や役割を解説いたします。
Thymeleafの記法や動作についてはSPIRAL ver.2 サポートサイト Thymeleaf記法をご参照ください。
また、Thymeleaf関連記事をまとめた Thymeleaf特集も是非ご覧ください。

レコード照合フォームブロックとは

レコード照合フォームブロックは、入力するデータの値がDB内のレコード情報と一致するか、レコード情報を照合するためのフォームブロックです。

レコード照合フォームブロックの活用例：SMS認証フォーム

詳しくはレコード照合フォームブロックをご覧ください。

ソース編集が必要ないパターン

下記の表示を変えたい場合

・ラベル
・プレースホルダー
・入力必須エラー
・送信ラベル

これらの設定や文言は、設定画面上から変更することができます。
ソース上に直書きはされていないため、ソース設定の場合でもソースの編集は不要です。

ファイルやreCAPTCHAを追加したい

ソースの編集は必要ですが、一から書く必要はありません。
ソース編集画面の「＋」ボタンから、各ソースを追加することが可能です。

ソースと画面の対応

レコード照合フォームブロックソースと画面は以下のように対応しています。

レコード照合フォームブロックのソース全体

フォーム表示名（テキストパーツ）

レコード照合フォームに表示されている、フォーム表示名を表示するタグです。
ブロック作成時、デフォルトでこのタグが生成されています。
フォーム表示名を変更したい場合は、spanタグ内の文字列を直接書き換えます。

照合フィールド

照合するフィールドのラベルや入力欄を表示する部分を表すタグです。
基本設定の照合フィールドで設定したフィールドの入力欄が設定されています。

ラベルブロック

「th:text="${fields['id'].label}”」の記載により、DBのフィールドに設定した表示名が「Label」の部分に表示されます。
フィールド一覧にてラベルを設定している場合はそちらが優先されて表示されます。
管理画面やアプリ利用画面で表示される表示名は「氏名」にして、フォームで表示されるラベルは「お名前」とするなど、アプリとサイトで表示を分けることが可能です。

データブロック

入力欄を表示するためのインプットタグ、エラーメッセージなどを囲うタグです。

－インプットタグ

「th:placeholder="${fields['id'].placeholder}"」の記載により、共通タブで設定されているプレースホルダーが入力欄のプレースホルダーの部分に表示されます。
共通タブでプレースホルダーが設定されていない場合、プレースホルダーには何も表示されません。

－エラーメッセージ

「th:if="${errors['id'] != null}"」の記載により、エラーとなる値が送信された場合にエラーメッセージを表示します。
「th:text="${errors['id'].message}"」の記載により、設定されているエラーメッセージが「Error message」の部分に表示されます。
表示されるエラーメッセージは、エラーの原因によって変わります。
各エラーメッセージが設定されていない場合はデフォルトメッセージが表示されます。