【Tips】 Adaloでメッセージつきのバリデーションを設定する方法

こんにちは。人材系の会社でエンジニアをしているurmotです。
前回の記事で、Adaloで詰まったところを記事にすると書いたので、有限実行したいと思います。

今回は、Adaloでフォームにバリデーションをつけようとしたときに色々なやり方を発見したので、その方法を解説していきたいと思います。

バリデーションとは？

知っているよ！って人もいると思いますが、簡単に説明します。

フォームなどを入力する際に、必須項目のものを入力しないで送信ボタンを押すと「必須項目です。」のようなメッセージが表示されるアレのことです。
noteの登録ページだと↓な感じです。

Adaloのバリデーション

Adaloでもバリデーション機能は一応用意されています。

FormコンポーネントのFieldsを見てみると、「Required Error Text」という設定項目があります。これは、このFieldの入力を必須にするという意味です。

「Required Error Text」が有効になっているFieldを入力せずに送信ボタンをクリックした場合には、Fieldの周りが赤く表示されるようになっています。

これが、Adaloのデフォルトのバリデーションの動きです。
メッセージも出ないし、なぜ赤くなっているのか正直わかりづらいです。

また、このバリデーション機能は、Formコンポーネントにしか存在しません。
なので、Text Inputコンポーネントを使う場合には、この方法は利用することができません。

Adaloでメッセージ付きのバリデーションを設定する

ここからが本題です。
Adaloのバリデーションをわかりやすくメッセージ付きで表示できるようにする方法を解説していきます。

1. サンプルアプリの作成

前回と同じように、テスト用に「Coaching」のテンプレートから「Desktop Web App」を作成します。

2. フォームを作成する

今回は、Coachingテンプレートの中の「Client Sign Up」スクリーンのフォームにバリデーションをつけていきます。

この方法はFormコンポーネントではできないので、Text Inputコンポーネントを使う必要があります。

なので、最初に「Client Sign Up」スクリーンの中のFormコンポーネントを削除しましょう。

次に、このフォームをText InputコンポーネントとTextコンポーネントとButtonコンポーネントで再構築します。

3. フォームにバリデーションをつける

先程、再構築したフォームにバリデーションをつけていきましょう。

まず、Emailフィールドに必須項目のバリデーションをつけます。
EmailのText Inputコンポーネントの下に、Textコンポーネントを一つ追加します。
内容は赤色で「必須項目です」とします。

次に、追加したTextコンポーネントのVisibilityを変更します。
「Form Inputs > Email」「Is equal to」「Empty」としてください。

Previewで確認してみます。

空のときはメッセージが表示されていますが、文字を入力するとメッセージが非表示になっているのがわかると思います。

4. ボタンにバリデーションをつける

実は、今のままでは空のままでもサインアップすることができてしまいます。
これも防ぎましょう。

まず、ボタンコンポーネントを複製します。
複製したボタンはわかりやすいように、少し色を薄くしておきましょう。

複製したボタンのVisibilityを設定します。
条件は、「Form Inputs > Email」「Is equal to」「Empty」です。

次に、複製元のボタンのVisibilityを設定します。
条件は先ほどと逆で、「Form Inputs > Email」「Is not equal to」「Empty」です。

Previewで見てみます。

Emailが空の場合は、ボタンが薄くなっていますが、入力すると濃いボタンに入れ替わっていることがわかると思います。

6. おまけ: Emailの重複チェックをする

おまけで、メールアドレスが重複していた場合に、メッセージを表示するようなバリデーションを追加してみます。

EmailのText Inputコンポーネントの下に、Textコンポーネントをもう一つ追加します。
内容は赤色で「既に登録されているメールアドレスです」とします。

次に、追加したTextコンポーネントにVisibilityを設定します。
条件は「Users > Count」「Is greater than or equal」「1」とします。
その後、「All users > Count」の下にある「+  ADD USERS FILTER」というボタンをクリックして、フィルターを追加します。
条件は「Email」「Is equal to」「Form Input > Email」とします。

少し複雑な条件ですが、EmailのText Inputコンポーネントに入力されているメールアドレスと一致するユーザーが1つ以上あると、メッセージを表示するという意味になります。

実際にPreviewで試してみましょう。

デフォルトで用意されている「john@example.com」を入力してみると、メッセージが表示されていることがわかると思います。

次に、ボタンにバリデーションを追加しましょう。

濃い方のボタンを選択し、「Create User」Actionを選択し、「When does this happen?」を「Sometimes...」に変更し、条件を指定します。
条件は「Users > Count」「Is equal to」「0」とします。
その後、「All users > Count」の下にある「+  ADD USERS FILTER」というボタンをクリックして、フィルターを追加します。
条件は「Email」「Is equal to」「Form Input > Email」とします。

こうすることで、EmailのText Inputコンポーネントに入力されているメールアドレスと一致するユーザーが0の時のみ、Actionが実行されるようになります。

実際にPreviewで試してみましょう。

わかりづらいですが、「SIGN UP」ボタンをクリックしても何も起こりません。

まとめ

AdaloのText Inputコンポーネントを使ってバリデーションを設定する方法を解説しました。
Formコンポーネントのバリデーションとは異なり、メッセージを表示できる点がユーザービリティが上がっていると思います。

実際にやってみた所管としては、Adaloはシンプルなフォームを作る分には簡単なのですが、普通のWebサービスに求めるレベルのものを作ろうと思うとひと手間必要になってしまうのが難点です。

ただ、Adaloもまだまだ発展途上ですし、アップデートでこの辺が対応されてくるともっと使いやすいサービスになると思うので、これからに期待です。

次は、Adaloの「Forgot Password」を日本語化するやり方について解説記事を書こうと思います。