Résumé IA
Souhaitez-vous ajouter des restrictions d'âge au sélecteur de date de votre formulaire ? Ce guide vous montrera comment valider les âges et afficher des messages personnalisés lorsque les dates ne répondent pas à vos exigences. Nous allons le démontrer en utilisant un formulaire d'inscription à un cours de ballet pour enfants qui n'accepte que les enfants âgés de 12 à 18 ans.
Configuration de votre formulaire
Dans la première étape, créez simplement un nouveau formulaire et ajoutez un champ de formulaire Date / Heure à votre formulaire.
Ajout de la validation des restrictions d'âge
Pour valider les âges et afficher des messages d'erreur sous le champ du formulaire, ajoutez ce code à votre site. Si vous n'êtes pas sûr de la manière d'ajouter du code personnalisé, veuillez consulter notre guide sur la façon d'ajouter des extraits de code.
/**
* 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 );
Assurez-vous de mettre à jour l'ID du formulaire (1000) et l'ID du champ (25) pour qu'ils correspondent à votre propre formulaire. Si vous avez besoin d'aide pour trouver ces ID, consultez notre guide pour trouver les ID de formulaire et de champ.
Avec cet extrait de code, si les dates ne respectent pas la restriction d'âge, un message s'affichera sous le champ lorsque le bouton Envoyer sera cliqué.
Utilisation de la restriction d'âge avec les champs répétitifs
Si votre champ de date se trouve à l'intérieur d'un champ répétitif, utilisez cette version modifiée :
/**
* 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 );
Utilisation de la comparaison de dates exactes
Pour une vérification d'âge plus précise, comme s'assurer que les utilisateurs ont exactement 18 ans ou plus :
/**
* 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 );
Et voilà ! Vous avez implémenté avec succès la restriction d'âge sur votre formulaire pour votre champ de sélecteur de date. Ensuite, souhaitez-vous également personnaliser le champ de sélecteur de date d'autres manières ? Consultez notre tutoriel sur les options de personnalisation du champ date et heure pour plus de détails.