ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

フォームで郵便番号フィールドの検証を追加する方法

WPFormsに郵便番号フィールドの検証を追加しますか?デフォルトでは、住所フィールドを使用する場合、住所と一緒に郵便番号を入力する場所しかありません。しかし、このチュートリアルでは、サービス対象の郵便番号を検索し、郵便番号が希望するサービスエリアにない場合にフォームの送信を失敗させるフィールドを作成する方法を説明します。

フォームの作成

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

まず、新しいフォームを作成し、フィールドを追加します。郵便番号フィールド検証のために、少なくとも1つの1行テキストフィールドを含めるようにしてください。

入力マスクを備えた一行テキストフォームフィールドを追加します。これが郵便番号フィールドとなります。これにより、フォームが送信されたときに、スニペットはこのフィールドに入力された値を取得し、サービスエリアにある郵便番号のリストと比較します。一致しない場合、ユーザーには現在そのエリアはサービス対象外であるというメッセージが表示されます。

フォームの作成でお困りの場合は、こちらの役立つガイドをご覧ください

入力マスクの使用

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

WPFormsの入力マスクの詳細については、こちらのチュートリアルでその他の例をご覧ください

1行テキストフォームフィールドで、[高度]タブをクリックし、99999と入力して郵便番号フィールド形式を作成します。この入力マスクは、5桁の数字のみを受け入れます。

郵便番号検証の適用(単一フォームのみ)

次にスニペットを追加します。この最初の例では、1つの特定のフォームにのみ郵便番号検証を追加します。スニペットの追加方法と場所について支援が必要な場合は、こちらのドキュメントをご覧ください

/**
* 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が、スニペットで指定したフォームIDと一致するかどうかを確認しています。この例では、このスニペットはフォームID 3382でのみ実行されます。

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

フォームIDとフィールドIDの番号を見つけるための支援については、フォームIDとフィールドIDの特定方法に関するチュートリアルをご覧ください。

スニペットで調整を行った後、入力された郵便番号が$zip_code_list配列リストに見つからない場合、フォームはフォーム送信を処理しなくなります。

郵便番号フィールド検証が失敗した場合、フォームは送信されません。

郵便番号検証の適用(複数のフォームに)

場合によっては、フォームごとに個別のスニペットを作成せずに、同じ郵便番号検証を複数の異なるフォームに適用したい場合があります。特定​​のフォームIDとフィールドIDを確認する代わりに、送信されたフォーム内で、郵便番号ラベルのリストに一致するラベルを持つフィールドを検索し、そのフィールドを検証する代替スニペットを使用できます。

/**
 * Add zip code field validation across all forms, regardless of field ID.
 *
 * @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
 */
function wpf_dev_validate_zip_code_all_forms( $fields, $entry, $form_data ) {

    // Define accepted labels for ZIP code fields.
    $zip_labels = array( 'zip', 'zip code', 'postal code' );

    // Find the field ID by label.
    $zip_field_id = false;
    foreach ( $form_data['fields'] as $field_id => $field ) {
        if ( isset( $field['label'] ) && in_array( strtolower( trim( $field['label'] ) ), $zip_labels, true ) ) {
            $zip_field_id = $field_id;
            break;
        }
    }

    // If no matching field is found, skip validation.
    if ( ! $zip_field_id || empty( $fields[ $zip_field_id ]['value'] ) ) {
        return $fields;
    }

    // Get the value entered by the user.
    $zip_code = trim( $fields[ $zip_field_id ]['value'] );

    // Allowed ZIP codes.
    $zip_code_list = array(
        '85224',
        '85225',
        '85226',
        '85233',
        '85234',
        '85244',
        '85246',
        '85248',
        '85249',
        '85286',
        '85295',
        '85296',
        '85297',
        '85298',
        '85299'
    );

    // Validate entered ZIP code.
    if ( ! in_array( $zip_code, $zip_code_list, true ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $zip_field_id ] = esc_html__(
            'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.',
            'plugin-domain'
        );
    }

    return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code_all_forms', 10, 3 );

この代替スニペットは、固定されたフィールドIDに依存しません。フォームのフィールドをループ処理し、各フィールドのラベルを確認し、$zip_labels配列の値(例:zipzip code、またはpostal code)のいずれかに一致するラベルを探します。一致が見つかると、そのフィールドを郵便番号フィールドとして扱い、その値が許可される郵便番号の同じリストと比較されます。

このスニペットはラベルを使用するため、フォームの郵便番号フィールドには、$zip_labelsの値のいずれかに一致するラベルを使用することが重要です。フォームで異なる用語を使用している場合は、スニペットの$zip_labels配列を編集して、独自のラベルテキストを追加できます。これにより、コードは期待どおりのフィールドでのみ実行されます。

このスニペットでフォームIDまたはフィールドIDを変更する必要はありません。$zip_labelsの値のいずれかに一致するラベルを持つ任意のフォームで、正しいフィールドを自動的に見つけます。

これで、一行テキストフィールドに郵便番号フィールド検証を追加するために必要なすべてが揃いました。住所フィールドと自動入力を使用する際に表示される国を制限することもしたいですか?特定の国に住所自動入力を制限する方法のチュートリアルをご覧ください。

アクションリファレンス: wpforms_process