Hinzufügen der Validierung von Postleitzahlenfeldern zu Ihren Formularen

Möchten Sie die Validierung des Postleitzahlenfeldes zu Ihren WPForms hinzufügen? Standardmäßig gibt es bei der Verwendung des Adressfeldes nur einen Platz, um eine Postleitzahl zusammen mit der Adresse einzugeben. In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie ein Feld erstellen können, das Ihre zugänglichen Postleitzahlen durchsucht und das Absenden des Formulars fehlschlägt, wenn die Postleitzahl nicht in Ihrem bevorzugten Servicebereich liegt.

Erstellen des Formulars

Wir beginnen mit der Erstellung eines neuen Formulars und fügen alle erforderlichen Felder hinzu.

Wir fügen ein einzeiliges Textformularfeld mit einer Eingabemaske hinzu, die als unser Postleitzahlenfeld dient. Wenn das Formular abgeschickt wird, vergleicht das Snippet den in dieses Feld eingegebenen Wert mit einer Liste von Postleitzahlen, die in unserem Servicegebiet liegen. Wenn der Vergleich fehlschlägt, wird dem Benutzer eine Meldung angezeigt, die besagt, dass wir dieses Gebiet zur Zeit nicht bedienen.

Wenn Sie Hilfe bei der Erstellung von Formularen benötigen, sehen Sie sich bitte diesen nützlichen Leitfaden an.

Verwendung der Eingabemaske

Da unser einzeiliges Textformularfeld wie ein Standard-Postleitzahlenfeld aussehen soll, fügen wir diesem Feld eine Eingabemaske hinzu. Klicken Sie dazu auf das Feld und wechseln Sie auf die Registerkarte Erweitert. Geben Sie im Feld Eingabemaske den Wert 99999 ein. Das bedeutet, dass dieses Feld nur 5 numerische Ziffern akzeptiert.

Weitere Informationen über Eingabemasken in WPForms finden Sie in diesem Tutorial mit weiteren Beispielen.

Postleitzahlvalidierung anwenden (nur auf einem einzigen Formular)

Jetzt ist es an der Zeit, unseren Snippet hinzuzufügen. Dieses erste Beispiel fügt die Postleitzahlvalidierung nur zu einem bestimmten Formular hinzu. Wenn Sie Hilfe dazu benötigen, wie und wo Sie Snippets hinzufügen können, lesen Sie bitte diese Dokumentation.

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

Schlüsseln wir dieses Snippet auf, um jeden Teil zu erklären. Im ersten Abschnitt des Snippets wird geprüft, ob die Formular-ID, die das Snippet untersucht, mit der Formular-ID übereinstimmt, die wir im Snippet angegeben haben. In diesem Beispiel wird dieses Snippet nur für die Formular-ID 3382 ausgeführt.

In der nächsten Zeile des Schnipsels wird nach der Feld-ID 6 gesucht und der Wert, der in das Formular eingegeben wurde, abgefragt. Sobald er diesen Wert hat, vergleicht er den eingegebenen Wert mit der Liste der Postleitzahlen, die wir in das Array $zip_code_list eingegeben haben. Sie müssen die Formular-ID und die Feld-ID aktualisieren und die Postleitzahlen, die in diesem Array angezeigt werden, mit Ihren eigenen Postleitzahlen abgleichen.

Nachdem Sie Ihre Anpassungen am Snippet vorgenommen haben, werden Sie feststellen, dass das Formular die Formularübermittlung nicht verarbeitet, wenn die eingegebene Postleitzahl nicht in der Array-Liste $zip_code_list gefunden wird.

Anwendung der Postleitzahlvalidierung (auf mehreren Formularen)

In einigen Fällen möchten Sie möglicherweise dieselbe Postleitzahlvalidierung auf mehrere verschiedene Formulare anwenden, ohne für jedes Formular einen separaten Snippet zu erstellen. Anstatt eine bestimmte Formular-ID und Feld-ID zu überprüfen, können Sie einen alternativen Snippet verwenden, der das übermittelte Formular nach einem Feld durchsucht, dessen Bezeichnung mit einer Liste von Postleitzahlbezeichnungen übereinstimmt, und dieses Feld dann validiert.

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

Dieser alternative Ausschnitt hängt nicht von einer festen Feld-ID ab. Er durchläuft die Felder des Formulars, überprüft die Beschriftung jedes Feldes und versucht, eine Beschriftung zu finden, die mit einem der Werte in der $zip_labels Array, wie z. B. zip, zip code, oder postal codeWenn es eine Übereinstimmung findet, behandelt es dieses Feld als Postleitzahlenfeld und vergleicht seinen Wert mit derselben Liste zulässiger Postleitzahlen.

Da dieser Ausschnitt Labels verwendet, ist es wichtig, dass die Postleitzahlfelder in Ihren Formularen Labels verwenden, die mit einem der Werte in $zip_labelsWenn Ihre Formulare andere Formulierungen verwenden, können Sie die $zip_labels Array im Snippet und fügen Sie Ihren eigenen Beschriftungstext hinzu, damit der Code nur auf den Feldern ausgeführt wird, die Sie erwarten.

Und das ist alles, was Sie brauchen, um einem einzeiligen Textfeld die Überprüfung der Postleitzahl hinzuzufügen. Möchten Sie auch die Länder einschränken, die bei der Verwendung des Adressfelds und der automatischen Vervollständigung angezeigt werden? Werfen Sie einen Blick auf unser Tutorial über die Beschränkung der automatischen Vervollständigung von Adressen auf ein bestimmtes Land.

Verwandte Seiten

Referenz der Aktion: wpforms_process