Comment ajouter la validation du champ code postal à vos formulaires

Souhaitez-vous ajouter la validation du champ code postal à votre WPForms ? Par défaut, lorsque vous utilisez le champ Adresse, il n’y a qu’un endroit pour entrer un code postal avec l’adresse. Cependant, dans ce tutoriel, nous allons vous montrer comment créer un champ qui recherchera vos codes postaux desservis et échouera lors de la soumission du formulaire si le code postal n’est pas dans votre zone de service préférée.

Création du formulaire

Nous allons commencer par créer un nouveau formulaire et ajouter tous nos champs requis.

Nous ajouterons un champ de formulaire Texte sur une seule ligne qui aura un masque de saisie qui servira de champ Code postal. Cela permettra, lors de la soumission du formulaire, que le fragment prenne la valeur entrée dans ce champ et la compare à une liste de codes postaux qui se trouve dans notre zone de service. Si cela échoue, l’utilisateur verra un message indiquant que nous ne desservons pas cette zone pour le moment.

Si vous avez besoin d’aide pour créer des formulaires, veuillez consulter ce guide utile.

Utilisation du masque de saisie

Comme nous voulons que notre champ de formulaire Texte sur une seule ligne apparaisse comme un champ de code postal standard, nous allons ajouter un masque de saisie à ce champ. Pour ce faire, cliquez sur le champ et accédez à l’onglet Avancé. Dans le champ Masque de saisie, entrez 99999. Cela signifie que ce champ particulier n’acceptera que 5 chiffres numériques.

Pour plus d’informations sur les masques de saisie dans WPForms, veuillez consulter ce tutoriel pour plus d’exemples.

Application de la validation du code postal (sur un seul formulaire uniquement)

Il est maintenant temps d’ajouter notre fragment. Ce premier exemple ajoutera la validation du code postal à un seul formulaire spécifique. Si vous avez besoin d’aide sur comment et où ajouter des fragments, veuillez consulter cette documentation.

/**
* 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 );

Décomposons ce fragment pour expliquer chaque partie. La première section du fragment vérifie si l’ID du formulaire que le fragment examine correspond à l’ID du formulaire que nous avons spécifié dans le fragment. Pour cet exemple, ce fragment ne s’exécutera que sur le formulaire dont l’ID est 3382.

La ligne suivante du fragment recherche l’ID de champ 6 et récupère la valeur qui a été entrée dans le formulaire. Une fois qu’il a cette valeur, il va comparer cette valeur entrée avec la liste des codes postaux que nous avons entrés dans le tableau $zip_code_list. Vous devrez mettre à jour l’ID du formulaire, l’ID du champ et mettre à jour les codes postaux affichés dans ce tableau pour correspondre à vos propres codes postaux.

Une fois que vous avez effectué vos ajustements sur l'extrait de code, vous remarquerez maintenant que le formulaire ne traitera pas la soumission du formulaire si le code postal saisi ne se trouve pas dans la liste du tableau $zip_code_list.

Application de la validation du code postal (sur plusieurs formulaires)

Dans certains cas, vous voudrez peut-être appliquer la même validation de code postal à plusieurs formulaires différents sans créer d'extrait de code distinct pour chaque formulaire. Au lieu de vérifier un ID de formulaire et un ID de champ spécifiques, vous pouvez utiliser un extrait de code alternatif qui recherche dans le formulaire soumis un champ dont l'étiquette correspond à une liste d'étiquettes de codes postaux, puis valide ce champ.

/**
 * 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 );

Cet extrait de code alternatif ne dépend pas d'un ID de champ fixe. Il parcourt les champs du formulaire, examine l'étiquette de chaque champ et essaie de trouver une étiquette qui correspond à l'une des valeurs du tableau $zip_labels, telles que zip, zip code ou postal code. Lorsqu'il trouve une correspondance, il traite ce champ comme le champ du code postal et compare sa valeur à la même liste de codes postaux autorisés.

Étant donné que cet extrait de code utilise des étiquettes, il est important que les champs de code postal de vos formulaires utilisent des étiquettes qui correspondent à l'une des valeurs de $zip_labels. Si vos formulaires utilisent une formulation différente, vous pouvez modifier le tableau $zip_labels dans l'extrait de code et ajouter votre propre texte d'étiquette afin que le code ne s'exécute que sur les champs que vous attendez.

Et c'est tout ce dont vous avez besoin pour ajouter avec succès la validation du champ de code postal à un champ de Texte sur une seule ligne. Souhaitez-vous également limiter les pays qui s'affichent lors de l'utilisation du champ Adresse et de l'autocomplétion ? Consultez notre tutoriel sur Comment restreindre l'autocomplétion d'adresse à un pays spécifique.

Articles associés

Référence d'action : wpforms_process