So fügen Sie die Validierung von Postleitzahlenfeldern zu Ihren Formularen hinzu

Möchten Sie die Validierung von Postleitzahlenfeldern zu Ihren WPForms hinzufügen? Standardmäßig gibt es beim Verwenden des Adressfelds nur ein Feld zur Eingabe einer Postleitzahl zusammen mit der Adresse. In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie ein Feld erstellen können, das Ihre bedienten Postleitzahlen durchsucht und das Absenden des Formulars fehlschlagen lässt, wenn die Postleitzahl nicht in Ihrem bevorzugten Servicebereich liegt.

Erstellen des Formulars

Wir beginnen damit, ein neues Formular zu erstellen und alle erforderlichen Felder hinzuzufügen.

Wir fügen ein Textfeld (eine Zeile) hinzu, das eine Eingabemaske hat und als unser Postleitzahlenfeld dient. Dies ermöglicht es, dass beim Absenden des Formulars der Ausschnitt den in diesem Feld eingegebenen Wert nimmt und ihn mit einer Liste von Postleitzahlen vergleicht, die sich in unserem Servicebereich befinden. Wenn dies fehlschlägt, sieht der Benutzer eine Meldung, dass wir dieses Gebiet derzeit nicht bedienen.

Wenn Sie Hilfe beim Erstellen von Formularen benötigen, sehen Sie sich bitte diesen nützlichen Leitfaden an.

Verwendung der Eingabemaske

Da wir möchten, dass unser Textfeld (eine Zeile) wie ein Standardfeld für Postleitzahlen aussieht, fügen wir diesem Feld eine Eingabemaske hinzu. Klicken Sie dazu auf das Feld und navigieren Sie zur Registerkarte Erweitert. Geben Sie im Feld Eingabemaske 99999 ein. Das bedeutet, dass dieses spezielle Feld nur 5 Ziffern akzeptiert.

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

Anwenden der Postleitzahlenvalidierung (nur für ein einzelnes Formular)

Jetzt ist es an der Zeit, unseren Ausschnitt hinzuzufügen. Dieses erste Beispiel fügt die Postleitzahlenvalidierung nur zu einem bestimmten Formular hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie Ausschnitte 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 );

Lassen Sie uns diesen Ausschnitt aufschlüsseln, um jeden Teil zu erklären. Der erste Abschnitt des Ausschnitts prüft, ob die Formular-ID, die der Ausschnitt betrachtet, mit der im Ausschnitt angegebenen Formular-ID übereinstimmt. In diesem Beispiel wird dieser Ausschnitt nur für die Formular-ID 3382 ausgeführt.

Die nächste Zeile des Ausschnitts sucht nach der Feld-ID 6 und erfasst den Wert, der im Formular eingegeben wurde. Sobald er diesen Wert hat, vergleicht er diesen eingegebenen Wert mit der Liste der Postleitzahlen, die wir im Array $zip_code_list eingegeben haben. Sie müssen die Formular-ID, die Feld-ID aktualisieren und die in diesem Array angezeigten Postleitzahlen aktualisieren, um Ihre eigenen Postleitzahlen anzugeben.

Sobald 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 $zip_code_list-Arrayliste gefunden wird.

Postleitzahlenvalidierung anwenden (für mehrere Formulare)

In einigen Fällen möchten Sie möglicherweise dieselbe Postleitzahlenvalidierung auf mehrere verschiedene Formulare anwenden, ohne für jedes Formular ein separates Snippet zu erstellen. Anstatt eine bestimmte Formular-ID und Feld-ID zu überprüfen, können Sie ein alternatives Snippet verwenden, das das übermittelte Formular nach einem Feld durchsucht, dessen Bezeichnung mit einer Liste von Postleitzahlenbezeichnungen ü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 );

Dieses alternative Snippet ist nicht von einer festen Feld-ID abhängig. Es durchläuft die Felder des Formulars, betrachtet die Bezeichnung jedes Feldes und versucht, eine Bezeichnung zu finden, die mit einem der Werte im $zip_labels-Array übereinstimmt, wie z. B. zip, zip code oder postal code. Wenn es eine Übereinstimmung findet, behandelt es dieses Feld als Postleitzahlenfeld und vergleicht seinen Wert mit derselben Liste zulässiger Postleitzahlen.

Da dieses Snippet Bezeichnungen verwendet, ist es wichtig, dass die Postleitzahlenfelder in Ihren Formularen Bezeichnungen verwenden, die mit einem der Werte in $zip_labels übereinstimmen. Wenn Ihre Formulare eine andere Formulierung verwenden, können Sie das $zip_labels-Array im Snippet bearbeiten und Ihren eigenen Bezeichnungstext hinzufügen, damit der Code nur für die Felder ausgeführt wird, die Sie erwarten.

Und das ist alles, was Sie benötigen, um erfolgreich eine Postleitzahlenfeldvalidierung zu einem Single Line Text-Feld hinzuzufügen. Möchten Sie auch die Länder einschränken, die bei der Verwendung des Address-Feldes und der Autovervollständigung angezeigt werden? Sehen Sie sich unser Tutorial an So schränken Sie die Adressautovervollständigung auf ein bestimmtes Land ein.

Verwandt

Aktionsreferenz: wpforms_process