Resumen de IA
¿Te gustaría añadir restricciones de edad al selector de fechas de tu formulario? Esta guía te mostrará cómo validar edades y mostrar mensajes personalizados cuando las fechas no cumplan tus requisitos. Lo demostraremos utilizando un formulario de inscripción para una clase de ballet infantil que solo acepta niños de entre 12 y 18 años.
Configuración de tu formulario
En el primer paso, simplemente crea un nuevo formulario y añade un campo de formulario de Fecha / Hora a tu formulario.
Añadir validación de restricción de edad
Para validar edades y mostrar mensajes de error debajo del campo del formulario, añade este código a tu sitio. Si no estás seguro de cómo añadir código personalizado, consulta nuestra guía sobre cómo añadir fragmentos de código.
/**
* 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 );
Asegúrate de actualizar el ID del formulario (1000) y el ID del campo (25) para que coincidan con tu propio formulario. Si necesitas ayuda para encontrar estos IDs, consulta nuestra guía sobre cómo encontrar IDs de formularios y campos.
Con este fragmento de código, si las fechas no cumplen la restricción de edad, se mostrará un mensaje debajo del campo al hacer clic en el botón Enviar.
Usar restricción de edad con campos repetidores
Si tu campo de fecha está dentro de un campo repetidor, usa esta versión modificada:
/**
* 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 );
Usar comparación de fecha exacta
Para una verificación de edad más precisa, como asegurar que los usuarios tengan exactamente 18 años o más:
/**
* 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 );
¡Y eso es todo! Has implementado con éxito la restricción de edad en tu formulario para tu campo de selector de fechas. A continuación, ¿te gustaría personalizar también el campo de selector de fechas de otras maneras? Consulta nuestro tutorial sobre cómo personalizar las opciones del campo de fecha y hora para más detalles.