気をつけよう!

この記事はPHPコードを含み、開発者向けです。私たちはこのコードを好意で提供していますが、コードのカスタマイズやサードパーティの開発に関するサポートは提供していません。

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

解散

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

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

フォームの作成

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

新しいフォームを作成し、フィールドを追加することから始めます。郵便番号フィールドのバリデーションには、少なくとも1行のテキストフィールドを含めるようにしてください。

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

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

入力マスクの使用

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

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

この入力マスクは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と一致するかどうかを調べています。この例では、このスニペットはフォームID3382に対してのみ実行されます。

このスニペットの次の行では、フィールド ID6を探し、フォームに入力された値を取得しています。この値を取得したら、入力された値と$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 配列、例えば zip, zip codeあるいは postal code一致が見つかった場合、そのフィールドを郵便番号フィールドとして扱い、許可された郵便番号の同じリストと値を比較します。

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

このスニペットでは、フォームIDやフィールドIDを変更する必要はありません。ラベルが以下のいずれかの値と一致するフォーム上の正しいフィールドを自動的に検出します。 $zip_labels.

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

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