フォームのフィールドを検証する
ユーザーがフォームにデータを入力して送信ボタンをクリックするときに、データが有効であるかどうかを確認します。データが有効であるとみなされた場合は、アプリを続行できます。データが有効でない場合は、エラーがあるフィールドとその修正方法をユーザーに知らせる必要があります。
たとえば、メールを入力する必要があるフィールドにユーザーが名前を入力した場合、その情報は有効ではありません。アプリのビルトイン機能を使用してエラーメッセージを表示し、ユーザーに再試行を求めることができます。
クライアント側の検証を使用すると、ユーザーがフォームに入力した情報についてのフィードバックをすばやく提供できるため、ユーザーエクスペリエンスが向上します。ただし、必ずクライアント側からのデータを確認してからデータベースに保存する必要があります。
このドキュメントの大部分は、リアクティブWebアプリとモバイルアプリに適用されます。従来のWebアプリについては、「従来のWebでの検証」をご覧ください。
アクセラレータを使用して初期検証フローを作成する
OutSystemsのローコードアプローチでは、サポートされているデータ型に対するクライアント側の自動フォーム検証がデフォルトで用意されています。このビルトイン検証を使用するには、以下の手順を実行する必要があります。
- フォームの値のデータ型を設定します。手動で設定するか、エンティティからフォームフィールドをスキャフォールディングすることができます。
- 必要に応じて、フィールドを必須に設定します。
- アクセラレータをトリガーして、初期検証フローを含む新しいクライアントアクションを作成します。ロジックを自動的に作成するには、フォーム内のデータを送信する要素のイベントリストで［New Client Action］を選択します。詳細については、Buttonの新しいアクションを作成するときの手順の例をご覧ください。
入力フィールドを必須に設定する
ユーザーが必ず値を入力する必要がある場合、そのフィールドは必須になります。フィールドを必須に設定するには、ウィジェットを選択し、［Properties］ペインでMandatoryプロパティを［True］に設定します。［Mandatory］フィールドがあるのは、InputウィジェットやButtonGroupウィジェットのように、一般的なユースケースにおいて必要な場合です。
フォームフィールドのデータ型を設定する
ユーザーが入力した値が有効であるかどうかを自動的にチェックするには、期待される値をアプリが識別できるようにしておく必要があります。ウィジェットのプロパティの［Input Type］リストでデータ型を選択します。Integer、Currency、Date、Time、Emailなどの複数のデータ型の中から選択できます。
ビルトイン検証を有効化または無効化する
クライアント側のビルトイン検証を有効にするには、データを送信するイベントのBuilt-In Validationsプロパティを［Yes］に設定します。たとえば、クライアントアクションを呼び出すButtonウィジェットやLinkウィジェットのOn Clickイベントなどがあります。
クライアントアクションでデータを検証する
ビルトイン検証を有効にすると、フォームを送信するクライアントアクションでFormウィジェットのBoolean型のValidプロパティにアクセスできます。たとえば、ReorderItemFormフォームでユーザーが正しいデータを送信した場合、ReorderItemForm.Validの値はTrueになります。いずれかのフィールドにエラーがある場合、ReorderItemForm.Validの値はFalseになります。
この例では、IfノードのConditionにReorderItemForm.Validが設定されています。Validの値がFalseの場合は検証が失敗し、IfフローのFalseブランチが実行されます。
アプリは必須に設定されたフィールドのみを検証します。必須に設定されていないフィールドはオプションとなるため、スキップされます。
検証のエラーメッセージおよび警告メッセージをカスタマイズする
検証メッセージを編集するにはいくつかの方法があります。
デフォルトの検証メッセージを編集する
モジュールレベルでデフォルトの検証メッセージを編集することができます。Service Studioのいずれかのメインタブ（［Process］、［Interface］、［Logic］、［Data］）でモジュール名（1）をクリックして、モジュールのプロパティに移動します。次に、［Validation Messages］セクション（2）でメッセージを編集します。
プログラムに従ってフィールドの検証メッセージを変更する
アプリの実行中にフィールドの検証メッセージを変更することができます。これを行うには、ウィジェットのValidationMessageにテキスト値を割り当てます。なお、メッセージが表示されるのは検証が失敗してField.Validの値がFalseとなった後のみです。
アクセラレータによるクライアント側の検証の例
このセクションでは、クライアント側の検証の例を2つ示します。
データ型が事前定義されたフォームフィールドの自動作成
ローコードアクセラレータを使用してフォームにフィールドを挿入します。これにより、エンティティをデータソースとして使用する場合の作業を効率化できます。以下の手順を実行します。
- 画面にFormウィジェットをドラッグします。
- Formウィジェットにエンティティをドラッグします。フォームのフィールドに自動的に読み込まれます。
- 各フィールドに移動し、オプションではないすべてのフィールドのMandatoryを［Yes］に設定します。 4.［Save］ボタンを選択します。ボタンのプロパティの［Events］セクションで、［On Click］リストから［New Client Action］を選択します。デフォルトの検証ロジックを含む新しいアクションが開きます。
- Form.ValidがTrueまたはFalseのときの異なるロジックを追加します。
エンティティをフォームにドラッグすることで、この画面のようにフォーム、フィールド、［Save］ボタンを作成できます。
手順の例
Service Studioでは検証の初期ロジックが自動的に作成されるため、作業時間を大幅に短縮することができます。検証ロジックを作成する手順の例を以下に示します。ユーザーが以下の情報を入力した後に項目を並べ替えることができるアプリの画面があります。
- 名前 — 文字列、オプション
- メール — メールアドレス、必須
- 数量 — 整数、必須
UIと基本ロジックを作成する手順は、以下のとおりです。
- 新しいアプリを作成し、画面を追加します。画面に「ReorderItemScreen」という名前を付けます。
-
ローカル変数を3つ作成し、プロパティを以下のように設定します。
名前 データ型 EmployeeName Text EmployeeEmail Email Quantity Integer ローカル変数（1）は以下のようになり、Name（2）プロパティとData Type（3）プロパティが入力されます。
-
画面にFormウィジェットをドラッグし、「ReorderItemForm」という名前を付けます。
-
「ReorderItemForm」にInputウィジェットを3つドラッグし、プロパティを以下のように設定します。
名前 変数 必須 Input_EmployeeName EmployeeName No Input_EmployeeEmail EmployeeEmail Yes Input_Quantity Quantity Yes Input Typeプロパティは、変数のデータ型に合わせて自動的に変更されます。
-
フォームの入力フィールドの下にButtonウィジェットをドラッグします。ボタンのラベルを「Reorder」に設定します。この手順が終わると、以下のようになっています。
フォーム（1）と、その中に入力フィールド（2）があり、プロパティ（3）が設定されています。ボタン（4）がフォーム内にある必要があります。
Inputウィジェットの上にLabelウィジェットをドラッグして、入力フィールドの上にラベルを追加します。
6.ボタンを選択してプロパティに移動し、［Event］セクションとその中にある［On Click］を探します。［On Click］リストを開き、［New Client Action］を選択します。新しいアクションによって、初期検証フローを含むクライアントアクションを作成するアクセラレータがトリガーされます。
画面に戻ると、作成された「ReorderOnClick」クライアントアクション（1）が表示されています。［Reorder］ボタン（2）を選択し、［**Events**］セクションの**Built-In Validation**プロパティの値が［**Yes**］（3）であることを確認します。
-
最後に、ユーザーが無効なデータを入力した場合はエラーメッセージを表示し、データが有効な場合は成功メッセージを表示するようにフローを編集します。ReorderOnClickを開くと、以下のようになっています。
MessageノードをツールボックスからIfノードのFalseブランチにドラッグします。MessageノードのMessageプロパティに「
"Check if all fields have the correct information and then retry."」と入力し、［Type］リストで［Error］を選択します（1）。ツールボックスからMessageノードをもう1つドラッグし、今度はTrueブランチにドラッグします。「""Item reordered!""」と入力し、［Type］リストで［Success］を選択します（2）。
-
アプリをパブリッシュして実行します。有効なデータを入力すると、成功メッセージが表示されます。
一方、サポートされていない形式のメールを入力した場合や整数ではなく浮動小数を入力した場合は、エラーメッセージが表示されます。
なお、名前フィールドはオプションです。
カスタム検証ロジックを作成する
サポートされているデータ型については、期待されるデータ型に関する情報を入力すると自動的にビルトイン検証が機能します。
より複雑なシナリオで検証メカニズムを拡張する必要がある場合は、検証ロジックを作成してウィジェットのフィールドのValid変数を設定します。フォーム内のいずれかのフィールドを無効にすると、フォーム全体が無効になります（Form.Validの値がFalseになります）。
カスタム検証の例
この例では、フォームに出荷日を入力するフィールドが含まれています。検証ロジックで日付が過去のものであるかどうかを確認し（1）、過去のものである場合はInput_Date.Valid=Falseを設定することで無効なフィールドとしてマークします（2）。ユーザーエクスペリエンスを向上するため、Input_Date.ValidationMessageにカスタムメッセージを設定し、過去の日付は使用できないことをユーザーに知らせます（2）。
日付フィールドを無効にするとフォーム全体が無効になり（3）、フィールドの横にカスタムメッセージが表示されます。また、フローが終了する前には、画面の上に別のフィードバックメッセージが表示されます（4）。検証ロジックが正常に成功した場合は、アプリによってサーバーアクションが呼び出され、ユーザーによるリクエストを完了します（5）。
以下の図では、ブラウザで実行されているアプリでカスタム検証メッセージが表示され（1）、フォームの検証が失敗した後にフィードバックメッセージが表示されています。
従来のWebでの検証
このセクションは、サーバー側で検証が実行される従来のWebアプリに適用されます。
フォームの検証を実装するには、フォームデータの送信後にアプリから呼び出されるサーバーアクションを使用します。すべての検証をフローの最初に追加します。
1.各検証について、以下の手順を実行します。
1. 入力値を検証するためのロジックを追加します。
1. バリデーションに失敗した場合は、入力のランタイムプロパティを以下のように割り当てます。
* Input.Valid = False
* Input.ValidationMessage = "<エラーメッセージ>"
1. すべての入力を検証した後、Form.Validの値を確認します。無効な入力が1つでもある場合、フォームも無効になります。
1.If要素を以下の条件で追加します。Form.Valid
1. Trueの場合は、アクションフローを継続します。
1. Falseの場合は、アクションフローを終了します。無効な入力の横に検証メッセージが表示されます。
フォームのValidプロパティは、以下の場合にFalseになります。
- 失敗したビルトイン検証が1つでもある場合
- フォームの任意のフィールドのValidプロパティに
Falseが割り当てられている場合
無効な入力が含まれるすべてのフィールドの横に検証メッセージが表示されます。