フォームに郵便番号フィールドのバリデーションを追加する方法

はじめに

WPFormsに郵便番号フィールドのバリデーションを追加したいですか？デフォルトでは、住所フィールドを使用する場合、住所と一緒に郵便番号を入力する場所しかありません。しかし、このチュートリアルでは、サービス可能な郵便番号を検索し、郵便番号が希望するサービスエリアにない場合、フォームの送信に失敗するフィールドを作成する方法を紹介します。

フォームの作成

まず、新しいフォームを作成し、すべての必須フィールドを追加します。

郵便番号フィールドとして入力マスクを持つ1行テキスト・フォーム・フィールドを追加します。これにより、フォームが送信されると、スニペットはこのフィールドに入力された値を受け取り、当社のサービスエリアにある郵便番号のリストと比較します。比較に失敗した場合、ユーザーには現在その地域ではサービスを提供していないというメッセージが表示されます。

フォームの作成にヘルプが必要な場合は、こちらの便利なガイドをご覧ください。

入力マスクの使用

一行テキスト・フォーム・フィールドを標準的な郵便番号フィールドのように表示したいので、このフィールドに入力マスクを追加します。これを実現するには、フィールドをクリックし、Advancedタブに移動します。入力マスクフィールドに99999と入力する。これは、このフィールドが5桁の数字しか受け付けないことを意味します。

WPFormsの入力マスクの詳細については、このチュートリアルの例を参照してください。

スニペットの追加

いよいよスニペットを追加します。スニペットを追加する方法や場所についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/

function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {

	// Optional, you can limit to specific forms. Below, we restrict output to
	// form #3382.

	if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
		return $fields;
	}

	// Get the value of the zip code field the user entered
	// Field ID for zip code field is '6'
	$zip_code = $fields[6][ 'value' ];

	// Zip code array, each zip code separated by a comma
	$zip_code_list = array(
	'85224',
	'85225',
	'85226',
	'85233',
	'85234',
	'85244',
	'85246',
	'85248',
	'85249',
	'85286',
	'85295',
	'85296',
	'85297',
	'85298',
	'85299'
	);

	if (!in_array($zip_code, $zip_code_list)) {

		// Check the field ID 75 and show an error message at the top of the form and under the specific field
		wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
	}
	
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );

このスニペットを分解して各部分を説明しましょう。スニペットの最初のセクションでは、スニペットが見ているフォームIDが、スニペットで指定したフォームIDと一致するかどうかを調べています。この例では、このスニペットはフォームID3382に対してのみ実行されます。

このスニペットの次の行では、フィールド ID6を探し、フォームに入力された値を取得しています。この値を取得したら、入力された値と$zip_code_list配列に入力した郵便番号のリストを比較します。フォーム ID、フィールド ID を更新し、 この配列に表示される郵便番号を自分の郵便番号と一致するように更新する必要があります。

スニペットを調整したら、入力された郵便番号が$zip_code_list配列リストにない場合、フォームの送信が処理されないことに気づくでしょう。

以上で、1行テキストフィールドに郵便番号フィールドバリデーションを追加することができました。住所フィールドとオートコンプリートを使用するときに表示される国も制限したいですか？住所オートコンプリートを特定の国に制限する方法のチュートリアルをご覧ください。

関連

アクション・リファレンス：wpforms_process