### [Authorize.net の住所フィールドにバリデーションを追加する方法](https://wpforms.com/developers/how-to-add-address-field-validation-for-authorize-net/)

**公開日:** 2022年3月8日
**著者:** Umair Majeed

**概要:** このチュートリアルでは、JavaScriptを使用してAuthorize.netの支払いフォームにある「住所」フォームフィールドに住所の検証機能を追加する方法について解説します。

**内容:**

Authorize.netの支払いフォームにおける住所の検証機能を改善したいとお考えですか？デフォルトでは、Authorize.netは住所フィールドを60文字に制限していますが、フォーム送信後に技術的なエラーメッセージが表示されるだけです。

このガイドでは、送信前に住所の長さの問題を検知する、ユーザーフレンドリーな検証機能を追加する方法をご紹介します。

## 問題の理解

**住所**が60文字を超えると、Authorize.netは次のような分かりにくいエラーを表示します：

```

Authorize.Netにより支払いが拒否されました。
API: (E00003) 'AnetApi/xml/v1/schema/AnetApiSchema.xsd:address' 
要素が無効です – 値 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
は、データ型 'String' に基づいて無効です – 
実際の長さが MaxLength 値を超えています。
```

これを、フォーム入力中に即座に表示される、明確でユーザーフレンドリーなメッセージに置き換えます。

## フォームの設定

まず、[Authorize.net アドオン](https://wpforms.com/addons/authorize-net-addon/ "Authorize.Net Addon") を使用してフォームを作成する必要があります。 Authorize.netの支払いフォームの作成方法については、[Authorize.net支払いの設定](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/)に関するガイドをご覧ください。

フォームに必ず**住所**フィールドを追加してください。これは、取引の配送先または請求先住所を取得するために必要です。

## 住所フィールドのマッピング

フォームビルダーの**「Payments」**タブに移動し、**「Authorize.net」**タブを選択します。フォームの住所フィールドを、対応するAuthorize.netの取引フィールドにマッピングしてください。これにより、住所データが支払い情報と共に正しく送信されます。

![フォームのフィールドをAuthorize.net内の正しいフィールドにマッピングする](https://wpforms.com/wp-content/uploads/2022/03/wpforms-anet-map-address.jpg)## 検証コードの追加

住所の検証を有効にするには、このコードをサイトに追加してください。カスタムコードの追加方法がわからない場合は、[WordPressへのコードスニペットの追加に関するガイド](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)をご確認ください。

コードのカスタマイズ：

- **11行目**：**1000**をフォームIDに置き換えてください
- **16行目**：**25**を住所フィールドIDに置き換えてください
- **19行目**：**25**を再度、住所フィールドIDに置き換えてください

フォームIDやフィールドIDの確認方法については、[フォームIDおよびフィールドIDの確認方法に関するガイド](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)をご参照ください。

これで、ユーザーが住所を入力する際、**Address**フィールドのいずれかの行が60文字を超えると、即座に住所の検証メッセージが表示されます。

![1行目または2行目の文字数が60文字を超えると、ユーザーには即座に住所の検証メッセージが表示されます](https://wpforms.com/wp-content/uploads/2022/03/new-authorize-net-address-validation.jpg)これで設定は完了です！次に、Authorize.netへ請求書番号も送信しますか？ [Authorize.net Paymentsへ請求書番号を送信する方法](https://wpforms.com/developers/how-to-send-an-invoice-number-through-to-authorize-net-payments/ "How to Send an Invoice Number Through to Authorize.net Payments")に関するチュートリアルをご覧ください。

## 参照アクション

[wpforms\_process](https://wpforms.com/developers/wpforms_process/ "wpforms_processアクションの使用")

**カテゴリ:** アドオン

**タグ:** Authorize.net, Javascript, JS

---