申込フォームに入力チェックを加える

クエステトラユーザのみなさん、こんにちは。開発責任者の畠中です。

申込アプリを改良してきましたが、申込フォームでは「メールアドレス/電話番号が入力されているか」という必須チェックしかしていませんでした。

申込フォームで、電話番号の存在確認をはさむ

メールアドレスや電話番号が間違えていたら、結局は申込が完了しない仕組みですが、「明らかにおかしい」というレベルの入力は、最初の段階で弾きたいところです。

ということで、メールアドレスと電話番号の設定を変更します。「満たすべき正規表現」のチェックを加えます。他のデータ項目については、表示の変更はないので割愛します。

M206: データ項目別に必須チェックや入力書式チェックを設定する

データ項目名 データ型 必須 開始イベント
(フォーム)
受信タスク
(フォーム)
ヒューマン
タスク
メールアドレス 文字型
単一行
編集可 表示のみ 表示のみ
満たすべき正規表現: [-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*@[-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*
電話番号 文字型
単一行
編集可 表示のみ 表示のみ
満たすべき正規表現: \+81\d{9,10}

まず正規表現が簡単な「電話番号」について。日本の電話番号しか対応しない前提です。

総務省 (電話番号に関するQ&A) によると、電話番号は以下の6種類に分類されているそうです。

  • [00から始まる番号] 中継する電話会社を使って電話する時や国際電話をかける時に使います。
  • [0A0から始まる番号(Aは0以外)] 携帯電話、PHS、発信者課金ポケットベル、IP電話等に電話する時に使います。
  • [0AB0から始まる番号(A、Bは0以外)] 電話会社が提供する高度な電話サービスを利用する時などに使います。
  • [0ABCから始まる番号(A、B、Cは0以外)] 固定電話に電話する時に使います。(市外通話)
  • [1から始まる番号] 緊急性、公共性、安全性の観点から重要な時や付加サービスに使います。
  • [2~9から始まる番号] 固定電話に電話する時に使います。(市内通話)

このうち、対応すべきと思われるのは、以下2つになります。

  • [0A0から始まる番号(Aは0以外)]
  • [0ABCから始まる番号(A、B、Cは0以外)]

さらに[0A0から始まる番号(Aは0以外)]は

  • 携帯電話とPHSは「070」、「080」又は「090」から始まる11桁の番号です。
  • 発信者課金ポケベルは「0204」から始まる11桁の番号です。

となっています。総務省のホームページには IP 電話の言及がありませんでしたが、「050」始まりの11桁です。

[0ABCから始まる番号(A、B、Cは0以外)]は、

  • “0”
  • 市外局番/市内局番 5桁
  • 加入者番号 4桁

の、合計 10 桁 (先頭 “0” を除くと合計 9 桁) です。

これと Twilio はグローバルサービスで、電話番号は国番号から始めなければならないのを踏まえて、以下のような正規表現、「”+81″ 始まりの、残り 9桁 or 10桁の数字」になっています。”81″ は日本の国番号です。総務省によると、”81″ の次が “0” でないことも確実ですが、そこまで表現していません。

\+81\d{9,10}

続いて、メールアドレスについてです。メールアドレスの仕様 (RFC) は極めて複雑であり、全パターンを網羅するのは難しいです。昔は、仕様にそぐわない、RFC 違反のメールアドレスを発行できる、携帯電話会社もありました。迷惑メール対策という名目だったようですが。

さて、本サイトのマニュアルでは、以下が紹介されています。

R2060 正規表現による入力制御

[a-zA-Z0-9][a-zA-Z0-9_\.\-+]*@[A-Za-z0-9\.\-]+

ここでは、以下のような正規表現を指定します。

[-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*@[-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*

これは、Questetra BPM Suite の内部で実際に使用されている正規表現で、RFC 5322 の Address Specification から

  • コメント
  • 空白文字
  • 制御文字
  • IP アドレス
  • RFC 2822 で obsolete (時代遅れ) とされた形式
  • quoted-string を含む形式

を「除いた」ものになっています。サポートサイトで紹介されているものと比較すると

  • @ の前も @ の後ろも、「ピリオド終わり」「ピリオドの連続」は許可していない
  • 使用可能な記号の範囲が広い

といった違いがあります。現在においてはこれで十分と考え、これを採用しています。

これら正規表現を設定することで、明らかに電話番号でない、メールアドレスでない入力は、はじけるようになりました。

加えてもう1つ。入力チェックに加えて、プレースホルダと説明を追加したいと思います。
入力チェックを設定しても、申し込みをする人には、どのような入力チェックがされるのか解りません。
そこでプレースホルダや説明を使って、適切な説明を行うのが望ましいです。

データ項目名 データ型 必須 開始イベント(フォーム) 受信タスク(フォーム) ヒューマンタスク
メールアドレス 文字型単一行 編集可 表示のみ 表示のみ
満たすべき正規表現: [-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*@[-!#-'*+/-9=?A-Z^-~]+(?:\.[-!#-'*+/-9=?A-Z^-~]+)*
プレースホルダ: support@questetra.com
説明:

半角英数/記号のみでお願いします。
電話番号 文字型単一行 編集可 表示のみ 表示のみ
満たすべき正規表現: \+81\d{9,10}
プレースホルダ: +8175205XXXX
説明:

国番号(+81) から始めてください。<br>ハイフン抜き、数字のみでお願いします。

プレースホルダの利用には賛否があります。

否定的意見の最たるものは、「消えてしまうから注意事項など重要なことを記載してはいけない」というものです。これは「その通り」です。使っても、サンプル程度に留めるのが適切です。

他の否定的意見として、「フォームの初期値との区別がつかない」というものがあります。サンプルであると解るものであれば、初期値と見間違える可能性は低くなります。といっても、何をサンプルにするか難しいところです。

このようにプレースホルダの利用は難しいところがあるので、「まったく利用しない」というのも1つの方法です。

プレースホルダ/説明の設定によって、申し込みフォームは以下のような見た目になります。

今回は、電話番号やメールアドレスの入力チェックについて取り組みました。また入力チェックの内容が申込者に解るように、説明やプレースホルダも設定しました。これでおしまいです。それではまた。

Questetra Supportをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

上部へスクロール