Möchten Sie der Datumsauswahl in Ihrem Formular Altersbeschränkungen hinzufügen? In diesem Leitfaden erfahren Sie, wie Sie Altersangaben validieren und benutzerdefinierte Meldungen anzeigen können, wenn die Daten nicht Ihren Anforderungen entsprechen. Wir demonstrieren dies anhand eines Anmeldeformulars für einen Kinderballettkurs, das nur Kinder zwischen 12 und 18 Jahren akzeptiert.
Einrichten Ihres Formulars
Im ersten Schritt erstellen Sie einfach ein neues Formular und fügen ein Datums-/Zeit-Feld hinzu.
Hinzufügen einer Altersbeschränkungsvalidierung
Fügen Sie diesen Code zu Ihrer Website hinzu, um Altersangaben zu validieren und Fehlermeldungen unter dem Formularfeld anzuzeigen. Wenn Sie nicht sicher sind, wie Sie benutzerdefinierten Code hinzufügen können, lesen Sie bitte unsere Anleitung zum Hinzufügen von Code-Snippets.
/**
* Display an error message on submission of the form if the date doesn't fall within the guidelines.
*
* @link https://wpforms.com/developers/how-to-provide-an-age-restriction-on-the-datepicker-form-field/ *
*/
function wpf_dev_process( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #1000.
if ( absint( $form_data[ 'id' ] ) !== 1000 ) {
return $fields;
}
if ( isset( $fields[25][ 'value' ] ) && !empty( $fields[25][ 'value' ] ) ) {
$timestamp = strtotime( $fields[25][ 'value' ] );
if ($timestamp === false) {
// Invalid date format
wpforms()->process->errors[ $form_data[ 'id' ] ][ '25' ] = esc_html__( 'Invalid date format', 'plugin-domain' );
} else {
$birth_year = date('Y', $timestamp);
$current_year = date('Y');
$age = $current_year - $birth_year;
if ($age < 12 || $age > 18) {
// Show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ][ '25' ] = esc_html__( 'Minimum age requirement is 12 and maximum age requirement is 18', 'plugin-domain' );
}
}
} else {
// Date field is empty
wpforms()->process->errors[ $form_data[ 'id' ] ][ '25' ] = esc_html__( 'Date field is required', 'plugin-domain' );
}
return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );
Stellen Sie sicher, dass die Formular-ID (1000) und die Feld-ID (25) mit Ihrem eigenen Formular übereinstimmen. Wenn Sie Hilfe bei der Suche nach diesen IDs benötigen, lesen Sie unseren Leitfaden zur Suche nach Formular- und Feld-IDs.
Mit diesem Codeschnipsel wird, wenn die Daten die Altersbeschränkung nicht erfüllen, eine Meldung unter dem Feld angezeigt, wenn auf die Schaltfläche Senden geklickt wird.
Verwendung der Altersbeschränkung mit Wiederholfeldern
Wenn sich Ihr Datumsfeld innerhalb eines Wiederholfelds befindet, verwenden Sie diese geänderte Version:
/**
* Age restriction validation for Repeater fields
*/
function wpf_dev_process( $fields, $entry, $form_data ) {
if ( absint( $form_data[ 'id' ] ) !== 1000 ) {
return $fields;
}
foreach ( $fields as $field_id => $field ) {
if ( preg_match( '/^25(_\d+)?$/', $field_id ) ) {
if ( isset( $field[ 'value' ] ) && !empty( $field[ 'value' ] ) ) {
$timestamp = strtotime( $field[ 'value' ] );
if ( $timestamp === false ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Invalid date format', 'plugin-domain' );
} else {
$birth_year = date('Y', $timestamp);
$current_year = date('Y');
$age = $current_year - $birth_year;
if ( $age < 12 || $age > 18 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Minimum age requirement is 12 and maximum age requirement is 18', 'plugin-domain' );
}
}
}
}
}
return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );
Exakten Datumsvergleich verwenden
Für eine genauere Altersüberprüfung, z. B. um sicherzustellen, dass die Nutzer genau 18 Jahre oder älter sind:
/**
* Check if the user is 18 years or older using exact date comparison
*/
function wpf_dev_compare_dates( $fields, $entry, $form_data ) {
if ( absint( $form_data[ 'id' ] ) !== 1000 ) {
return $fields;
}
$age = 18;
$date_1 = $fields[25][ 'unix' ];
if( is_string( $date_1 ) ) {
$date_1 = strtotime( $date_1 );
}
if( time() - $date_1 < $age * 31536000 )
wpforms()->process->errors[ $form_data[ 'id' ] ][ 'header' ] = esc_html__( 'Apologies, you need to be 18 or older to submit this form.', 'plugin-domain' );
}
add_action( 'wpforms_process', 'wpf_dev_compare_dates', 10, 3 );
Und das war's! Sie haben die Altersbeschränkung für Ihr Datumsauswahlfeld erfolgreich in Ihr Formular implementiert. Möchten Sie nun das Datumsauswahlfeld auch auf andere Weise anpassen? In unserem Tutorial zum Anpassen der Optionen für das Datum/Zeit-Feld finden Sie weitere Details.