WixStudioでVeloを使う Step 40 「新フォームの高度なフォーム検証 - 1」
はじめに
以前、新フォームに関する記事を書いた。この記事が思った以上に反応があったので調子に乗ります。高度なフォーム検証の部分で一つテクニックを紹介する。
準備
「WixStudioでVeloを使う Step 38 「新フォーム」」を読まれている前提で話が進みます。
新しいサイトを作成し、フォームを追加します。
新フォーム
フォームには短い回答の入力欄を配置しておきます。
短い回答を配置
この入力欄には何かしらのメッセージが入力されるものとして使います。項目のタイトルを変更しましておきます。
項目のタイトルをメッセージに変更
さらに項目キーはmessage_fieldとしておきます。
項目キーはmessage_field
ここで一度、フォームを保存しておく。
※フォームを保存するとフォームに配置済の項目は項目キーが変更出来なくなるので注意。
これで準備完了。
ちょっとした問題がある
実は新フォームには不思議な現象が存在する。このメッセージ項目を必須項目にしてみる。
メッセージを必須項目にする
この状態でプレビューを試すと頭を抱えることになる。とりあえずプレビューを試す。
プレビューを試す
特に問題なく表示されているように見えるし、メッセージは必須項目のなってそう。うん、なってる。それも試す。とりあえず何も入力せずに送信。しっかりと入力が促される。
入力が促される
うん、ばっちり。
…おや？
おや？
「回答を入力してください。」って何だ。
「 メッセージを入力してください。 」とはしてくれないのですか？
もし、短い回答が複数あった場合。それらが必須だった場合はどうなる？
当然こうなる。
もし、短い回答が複数あった場合
実は項目のタイトルはアラートには反映されない。意味が伝わらないほどではないし、アラートは項目の直下に表示されている。だから、迷うことは無しだろうし許容できないこともない。でも、どうしても都合が悪い場合も考えられる。
フォーム項目に用意された必須項目などの入力チェックは便利だが、現時点でこれらの現象回避することが出来ない。
だから、高度なフォーム検証を使う。
※新たに追加した短い回答は削除しておく。
高度なフォーム検証で現象を回避する
フォーム項目は使わずに必須入力を実現してみる。
フォームが保存されていることを確認して、高度なフォーム検証を作成する。
高度なフォーム検証
関数の作成画面が開く。左上に関数名を設定することが出来るので今回の目的に合わせて設定しておいた方がいい。今回は「メッセージの必須入力」としておく。特に動作には関係ない。
メッセージの必須入力
作成を始める。
準備完了、作成を始める
条件を追加する
まずは条件を追加する。
条件を追加
条件の設定はまずプロパティの選択から。要は、今回の検証対象となる項目や値を選択する。今回はメッセージの入力をチェックするためメッセージを選択しておく。
プロパティとしてメッセージを選択
次にロジックを選択する。指定したプロパティの値をどうしたいのかを指定する項目になる。
今回は「が次と一致する」を選択する。
「が次と一致する」
最後にテキストの入力が促されるのでnullと入力する。
「null」と入力する
nullはプログラミングやシステムで空を表す表現。新フォームでは未入力の場合、項目の値としてnullが取得される。ただ、この仕様は正直、改良の余地あり。追々、ロジックの選択に「が空」が追加されても良いんじゃないかと思う。
設定が終わったら適用するボタンを押しておく。
検証エラーを適用する設定
最後に検証エラーを適用する設定を施す。
検証エラーを適用
フォーム項目キー(オプション) とエラーメッセージにはそれぞれ以下を設定する。
| フォーム項目キー(オプション) | エラーメッセージ |
|---|---|
message_field |
メッセージを入力してください。 |
検証エラーを適用を設定
フォーム項目キー(オプション) はオプションだが設定しないとアラートメッセージが送信ボタンの下に表示されてしまうらしい。
フォーム項目キー(オプション)はオプション
以上で設定が完了。
有効化ボタンを押して閉じる。
完成
確認と仕上げ
高度なフォーム検証が作成出来たので、設定されているか確認する。作成中のフォームの設定を開くと、高度なフォーム検証に先程作成したメッセージの必須入力が追加され有効になっていることが確認出来る。
高度なフォーム検証に「メッセージの必須入力」が追加されている
更に、編集に戻りメッセージの項目設定から必須項目が外しておく。この設定が残っていると高度なフォーム検証まで処理が進まない。
メッセージの項目設定から必須項目が外しておく
フォームを保存して完了。動作確認に進む。
動作確認
動作確認はプレビューでは試すことが出来ない。サイトを公開するかテストサイトで動作が確認出来る。今回はサイトを公開して試した。
どうやら、高度なフォーム検証（関数ビルダー／Functions）はダッシュボード側の機能で、ライブ環境で評価される仕様ということらしい。
サイトを公開
メッセージに何も入力せずに送信ボタンを押すと、検証エラーを適用で指定したメッセージが表示されるのが確認出来る。
エラーメッセージが確認出来る
もちろん正しく入力すれば、フォームは送信される。
まとめ
今回は新フォームの高度なフォーム検証に絞って記事を書いた。まだまだ触れられていない点は山ほどある。ただ、エラーメッセージの表示など要望が多そうな点でその解消方法に触れた。もしかすると他にも解消方法があるのかもしれないし、今後のアップデートで対応方法が変わってくるかもしれない点は要注意。
また、未入力の検証(ロジック)については今後も検討が必要。実は、この実装も問題を抱えている。例えば、メッセージの入力に「null」と入力した場合も未入力として判断されてしまう。
「null」と入力した場合も未入力として判断
実は、この実装に至るまでに別の方法で検証をしていたが上手く動かなかった経緯がある。例えば値が空や文字長が0の場合を判定する仕組みは用意されている。しかし、これらによる実装は正しく動作しなかった。原因は未入力の場合値が「null」となってしまう点だった。プログラム的には普通のことなのだが、問題は文字列として「null」となってしまうこと。その為、値が空という判定も文字長が0という判定も通用しなかった。結果、今回のような実装となった。
今後のアップデートなどに期待することにする。
まあ、メッセージに「null」の一言なんてものは、そもそも受け付ける必要が無いとも言えるが…
つづき
Discussion