Hinzufügen der Validierung von Postleitzahlenfeldern zu Ihren Formularen

Einführung

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.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, unser Snippet hinzuzufügen. Wenn Sie Hilfe 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.

Sobald Sie Ihre Anpassungen am Snippet vorgenommen haben, werden Sie feststellen, dass das Formular die Eingabe nicht verarbeitet, wenn die eingegebene Postleitzahl nicht in der Array-Liste $zip_code_list enthalten ist.

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