How To

郵便番号や電話番号の入力桁数を制限したい

当記事では、郵便番号等入力桁数を制限し、指定された桁数でない場合にバリデーションが表示されるようにする方法をご案内いたします。

桁数バリデーションの実装設定方法

郵便番号の桁数バリデーション設定について記載します。
※ 電話番号の桁数バリデーション設定も同様の操作であるため割愛します

  1. 任意のプロファイル編集画面にアクセス後、【address ( 購入者住所 )】のシナリオ内フォームにて、右にある追加(+)ボタンより「購入者連絡先 > 購入者 郵便番号1(2)」を選択し、シナリオを追加してください。


  2. 対象のフォームを追加したら【(バリデーションエラーメッセージ)】【バリデーション (JS)】という設定項目があります。
    例えば、郵便番号1:3桁、郵便番号2:4、で制限する場合は【バリデーション (JS)】にて下記のように設定してください。

[フォーム] zip01 - 郵便番号1

() => {
  return { required, numeric, minLength: minLength(3), maxLength: maxLength(3) }
},

[フォーム] zip02 - 郵便番号2

() => {
  return { required, numeric, minLength: minLength(4), maxLength: maxLength(4) }
},
  • minLength:最小桁数
  • maxLength:最大桁数

また、【(バリデーションエラーメッセージ)】では任意の文言を追加できます。
※ただしデフォルトで「文字数が足りません (x文字以上)」という文言の後に追加されます

<表示イメージ>

<最大入力可能文字数について>
通常モードの際も、フォーム編集内には【最大入力可能文字数】という項目が存在します。

こちらはsmart dialog内でバリデーションJSをリリースする前に使用していた制限機能で、バリデーションは表示されませんが最大文字数を設定することができます。

「maxLength」で入力した数字と同じ数字を入力するようにしてください。

この記事の目次

このセクションの記事

How To