検証のない電話番号欄は、荷物を持った配送業者が顧客に連絡できなくなるまでは無害に見えます。特に手動注文フォームでは、スタッフが電話やチャットのスクリーンショットから番号を書き写すため、普通のテキスト欄では打ち間違い、桁数の誤り、無効な頭番号が毎回そのまま通ってしまいます。
検証すべき実際の形式
バングラデシュの携帯電話番号には、はっきり決まった形式があります。11 桁で、01 で始まり、次に通信事業者を示す 3〜9 の数字が 1 つ、その後に 8 桁が続きます。正規表現で書くと ^01[3-9]d{8}$ です。この形に当てはまらないものは、有効なバングラデシュの携帯電話番号ではありません。
2 つの異なる理由で 2 回チェックする
この形式を 2 か所で検証しており、それぞれ別の問題を解決しています。
- ブラウザ側で即座に。スタッフが入力を終えた時点で番号が一致しなければ、欄の横にエラーメッセージが表示され、修正すればすぐに消えます。フォームを送信する前にミスに気付けます。
- サーバー側で送信時に。注文を作成する処理の中でも同じチェックをもう一度行い、JavaScript が無効化された場合や直接リクエストされた場合など、最初のチェックがすり抜けられたときはリクエストをそのまま拒否します。ブラウザ側の検証は親切であり、サーバー側の検証こそが本当の保証です。
さらに入力欄自体に maxlength="11" と inputmode="numeric" を設定し、スマートフォンでは最初から数字キーボードが表示され、12 桁目を物理的に入力できないようにしました。こうした小さな工夫で、後から検証で拾うのではなく、正しい入力がいちばん楽な道になります。
ポイントのまとめ
- ブラウザの中にしかない検証は検証ではなく、便利機能にすぎません。データを本当に守るのはサーバー側のチェックです。
- 検証の形式は、「電話番号らしく見える」といった大ざっぱなルールではなく、実際の現実の形式に合わせるべきです。
inputmodeやmaxlengthのような入力属性は、検証ロジックが動く前に、ある種類のミスを丸ごと防ぎます。
関連記事：カート金額に達したら送料無料を自動選択する、注文メールが Gmail に届かなかった理由。
ご自身の WooCommerce や WordPress の管理画面で同じような制約にお困りですか？ご相談ください。ArtinTech Solution はまさにこうしたストア向けのカスタムツールを開発しています。