Come aggiungere la convalida del campo CAP (Codice di Avviamento Postale) ai tuoi moduli

Vuoi aggiungere la convalida del campo CAP ai tuoi WPForms? Per impostazione predefinita, quando si utilizza il campo Indirizzo, c'è solo un posto dove inserire un CAP insieme all'indirizzo. Tuttavia, in questo tutorial, ti mostreremo come creare un campo che cercherà i tuoi CAP di servizio e fallirà alla sottomissione del modulo se il CAP non rientra nella tua area di servizio preferita.

Creazione del modulo

Inizieremo creando un nuovo modulo e aggiungendo tutti i campi richiesti.

Aggiungeremo un campo modulo Testo a riga singola che avrà una maschera di input che fungerà da campo CAP. Ciò consentirà, al momento dell'invio del modulo, che lo snippet prenda il valore inserito in questo campo e lo confronti con un elenco di CAP che si trova nella nostra area di servizio. Se fallisce, l'utente vedrà un messaggio che indica che al momento non serviamo quell'area.

Se hai bisogno di aiuto nella creazione di moduli, dai un'occhiata a questa utile guida.

Utilizzo della maschera di input

Poiché vogliamo che il nostro campo modulo Testo a riga singola appaia come un normale campo CAP, aggiungeremo una maschera di input a questo campo. Per fare ciò, fai clic sul campo e vai alla scheda Avanzate. All'interno del campo Maschera di input, inserisci 99999. Ciò significa che questo particolare campo accetterà solo 5 cifre numeriche.

Per maggiori informazioni sulle maschere di input in WPForms, consulta questo tutorial per altri esempi.

Applicazione della convalida del CAP (solo su un modulo singolo)

Ora è il momento di aggiungere il nostro snippet. Questo primo esempio aggiungerà la convalida del CAP a un solo modulo specifico. Se hai bisogno di assistenza su come e dove aggiungere snippet, consulta questa documentazione.

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

Analizziamo questo snippet per spiegare ogni parte. La prima sezione dello snippet verifica se l'ID del modulo che lo snippet sta esaminando corrisponde all'ID del modulo che abbiamo specificato nello snippet. Per questo esempio, questo snippet verrà eseguito solo sul modulo con ID 3382.

La riga successiva dello snippet cerca l'ID campo 6 e recupera il valore inserito nel modulo. Una volta ottenuto questo valore, confronterà tale valore inserito con l'elenco di CAP che abbiamo inserito nell'array $zip_code_list. Dovrai aggiornare l'ID del modulo, l'ID del campo e aggiornare i CAP visualizzati in questo array per farli corrispondere ai tuoi CAP.

Una volta apportate le modifiche allo snippet, noterai che il modulo non elaborerà l'invio del modulo se il codice postale inserito non viene trovato nell'elenco dell'array $zip_code_list.

Applicazione della convalida del codice postale (su moduli multipli)

In alcuni casi, potresti voler applicare la stessa convalida del codice postale a diversi moduli senza creare uno snippet separato per ciascun modulo. Invece di controllare un ID modulo e un ID campo specifici, puoi utilizzare uno snippet alternativo che cerca nel modulo inviato un campo la cui etichetta corrisponde a un elenco di etichette di codici postali e quindi convalida tale campo.

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

Questo snippet alternativo non dipende da un ID campo fisso. Scorre i campi del modulo, esamina l'etichetta di ciascun campo e tenta di trovare un'etichetta che corrisponda a uno dei valori nell'array $zip_labels, come zip, zip code o postal code. Quando trova una corrispondenza, tratta quel campo come il campo del codice postale e confronta il suo valore con lo stesso elenco di codici postali consentiti.

Poiché questo snippet utilizza le etichette, è importante che i campi del codice postale nei tuoi moduli utilizzino etichette che corrispondano a uno dei valori in $zip_labels. Se i tuoi moduli utilizzano una dicitura diversa, puoi modificare l'array $zip_labels nello snippet e aggiungere il tuo testo dell'etichetta in modo che il codice venga eseguito solo sui campi previsti.

E questo è tutto ciò che ti serve per aggiungere correttamente la convalida del campo del codice postale a un campo di Testo a riga singola. Desideri anche limitare i paesi visualizzati quando utilizzi il campo Indirizzo e l'autocompletamento? Dai un'occhiata al nostro tutorial su Come limitare l'autocompletamento dell'indirizzo a un paese specifico.

Correlati

Riferimento azione: wpforms_process