フォームで入力値のバリデーションを追加する

日本 ナレッジベース
1

:grey_question: Question

開始日と終了日を入力するフォームにおいて、以下の条件を満たさない場合にボタンを無効にするにはどうしたらよいでしょうか。

【条件】
・終了日は開始日よりも後の日付
・開始日は今日以前の日付
・終了日は今日以後の日付

:bulb: Answer

フォームボタンに『高度な論理』および『アクション』を定義し条件に応じてボタンを無効化します。

以下の様なフォームを作成し、以下の手順に従い『高度な論理』および『アクション』を追加してください。

  1. 開始日のフィールドキーとしてdateStartを定義します。同様に終了日のフィールドキーとしてdateEndを定義します。

  1. 編集したいボタンの上にマウスをホバーし、ポップアップメニューの中から編集ボタンをクリックします

  1. 『論理』タブから『論理を追加』をクリックします

  1. ボタンの論理を編集します

この論理では以下の条件でtrueを返す事で後述するアクションを呼び出します。

・開始日が終了日以後 (data.dateStart>= data.dateEnd) OR

・開始日は今日より後の日付 (dateStart > today) OR

・終了日は今日より前の日付 (dateEnd < today)

const today = new Date();
const dateStart = Date.parse(data.dateStart);
const dateEnd = Date.parse(data.dateEnd);
if (dateStart >= dateEnd || dateStart > today || dateEnd < today)
{
result = true;
}
else
{
result = false;
}

  1. 『アクション』を追加します

このアクションでは、前述の『論理』によりtrueが返された時に呼ばれます。

  1. 『アクション』を編集し、『アクション』および『論理』を保存します。

このアクションはボタンの『無効』プロパティをTrue(有効化)します。

以上で与えられた条件を満たさない場合にアクションを呼びボタンを無効にする事が出来ます。