Comment ajouter la validation du code postal dans vos formulaires

Souhaitez-vous ajouter la validation du champ "code postal" à vos 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 vous pouvez créer un champ qui recherchera les codes postaux utilisables et ne soumettra pas le 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 les champs obligatoires.

Nous ajouterons un champ de formulaire Texte à une ligne qui comportera un masque de saisie qui servira de champ pour le code postal. Ainsi, lorsque le formulaire sera soumis, le snippet prendra la valeur saisie dans ce champ et la comparera à une liste de codes postaux qui se trouvent dans notre zone de service. En cas d'échec, 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, consultez ce guide utile.

Utilisation du masque de saisie

Comme nous voulons que notre champ de texte à ligne unique s'affiche 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.

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 extrait de code. Ce premier exemple ajoutera la validation du code postal à un seul formulaire spécifique. Si vous avez besoin d'aide pour savoir comment et où ajouter des extraits de code, 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 cet extrait pour en expliquer chaque partie. La première section de l'extrait vérifie si l'ID du formulaire que l'extrait examine correspond à l'ID du formulaire que nous avons spécifié dans l'extrait. Pour cet exemple, ce snippet ne s'exécutera que sur le formulaire ID 3382.

La ligne suivante du snippet recherche le champ ID 6 et récupère la valeur saisie dans le formulaire. Une fois qu'elle a cette valeur, elle va la comparer à la liste des codes postaux que nous avons saisie 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 qu'ils correspondent à vos propres codes postaux.

Une fois que vous avez apporté vos modifications à l'extrait, vous remarquerez que le formulaire ne traitera pas la soumission si le code postal saisi ne figure pas dans la liste du tableau $zip_code_list.

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

Dans certains cas, vous pouvez souhaiter appliquer la même validation de code postal à plusieurs formulaires différents sans créer un extrait distinct pour chaque formulaire. Au lieu de vérifier un identifiant de formulaire et un identifiant de champ spécifiques, vous pouvez utiliser un autre extrait qui recherche dans le formulaire soumis un champ dont le libellé correspond à une liste de libellés 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 alternatif ne dépend pas d'un identifiant de champ fixe. Il parcourt les champs du formulaire, examine l'étiquette de chaque champ et tente de trouver une étiquette qui correspond à l'une des valeurs dans le $zip_labels tableau, tel que zip, zip codeou 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 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 $zip_labels dans l'extrait de code et ajoutez votre propre texte d'étiquette afin que le code ne s'exécute que sur les champs souhaités.

C'est tout ce dont vous avez besoin pour ajouter la validation du code postal à un champ de texte à ligne unique. Vous souhaitez également limiter les pays qui s'affichent lorsque vous utilisez le champ Adresse et la saisie semi-automatique ? Jetez un coup d'œil à notre tutoriel sur la façon de limiter la saisie semi-automatique d'une adresse à un pays spécifique.

En rapport

Référence de l'action : wpforms_process