Come aggiungere la convalida del campo del codice postale nei vostri moduli

Volete aggiungere la convalida del campo del codice postale ai vostri WPForm? Per impostazione predefinita, quando si usa il campo Indirizzo, c'è solo un posto per inserire un codice postale insieme all'indirizzo. Tuttavia, in questo tutorial vi mostreremo come potete creare un campo che cercherà i codici di avviamento postale utilizzabili e fallirà l'invio del modulo se il codice di avviamento postale non rientra nella vostra area di servizio preferita.

Creazione del modulo

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

Aggiungeremo un campo di testo a riga singola che avrà una maschera di input che fungerà da campo Codice postale. In questo modo, quando il modulo viene inviato, lo snippet prenderà il valore inserito in questo campo e lo confronterà con un elenco di codici di avviamento postale presenti nella nostra area di servizio. Se il confronto non va a buon fine, l'utente vedrà un messaggio che indica che al momento non serviamo quell'area.

Se avete bisogno di aiuto per la creazione di moduli, consultate questa utile guida.

Utilizzo della maschera di immissione

Poiché vogliamo che il nostro campo del modulo Testo a riga singola appaia come un campo di codice postale standard, aggiungeremo una maschera di input a questo campo. A tale scopo, fare clic sul campo e spostarsi nella scheda Avanzate. Nel campo Maschera di input, inserire 99999. Ciò significa che questo campo accetterà solo 5 cifre numeriche.

Per ulteriori informazioni sulle maschere di input in WPForms, consultare questo tutorial per ulteriori esempi.

Applicazione della convalida del codice postale (solo su un singolo modulo)

Ora è il momento di aggiungere il nostro snippet. Questo primo esempio aggiungerà la convalida del codice postale solo a un modulo specifico. Se hai bisogno di assistenza su come e dove aggiungere gli 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 );

Vediamo di scomporre questo snippet per spiegare ogni parte. La prima sezione dello snippet cerca di vedere se l'ID del modulo che lo snippet sta guardando corrisponde all'ID del modulo che abbiamo specificato nello snippet. Per questo esempio, lo snippet verrà eseguito solo sull'ID 3382 del modulo.

La riga successiva dello snippet cerca l'ID del campo 6 e prende il valore inserito nel modulo. Una volta ottenuto questo valore, confronterà il valore inserito con l'elenco dei codici di avviamento postale che abbiamo inserito nell'array $zip_code_list. È necessario aggiornare l'ID del modulo, l'ID del campo e aggiornare i codici di avviamento postale visualizzati in questo array per farli corrispondere ai propri codici di avviamento postale.

Una volta apportate le modifiche allo snippet, noterai che il modulo non elaborerà l'invio se il codice postale inserito non è presente nell'array $zip_code_list.

Applicazione della convalida del codice postale (su più moduli)

In alcuni casi, potresti voler applicare la stessa convalida del codice postale a diversi moduli senza creare uno snippet separato per ciascuno di essi. 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 corrisponda a un elenco di etichette di codici postali e quindi convalida quel 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. Esegue un ciclo attraverso i campi del modulo, esamina l'etichetta di ciascun campo e cerca di trovare un'etichetta che corrisponda a uno dei valori nel $zip_labels array, come ad esempio zip, zip code, o postal codeQuando trova una corrispondenza, considera 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 etichette, è importante che i campi del codice postale nei moduli utilizzino etichette che corrispondano a uno dei valori in $zip_labelsSe i tuoi moduli utilizzano una formulazione diversa, puoi modificare il $zip_labels array nello snippet e aggiungi il tuo testo di etichetta in modo che il codice venga eseguito solo sui campi desiderati.

Questo è tutto ciò che serve per aggiungere la convalida del campo del codice postale a un campo di testo a riga singola. Volete anche limitare i Paesi visualizzati quando utilizzate il campo Indirizzo e il completamento automatico? Date un'occhiata al nostro tutorial su Come limitare il completamento automatico dell'indirizzo a un paese specifico.

Correlato

Riferimento azione: wpforms_process