Gostaria de adicionar restrições de idade ao seletor de datas do seu formulário? Este guia mostra-lhe como validar idades e apresentar mensagens personalizadas quando as datas não cumprem os seus requisitos. Vamos demonstrar isto utilizando um formulário de registo de aulas de ballet para crianças que aceita apenas crianças entre os 12 e os 18 anos de idade.
Configurar o seu formulário
No primeiro passo, basta criar um novo formulário e adicionar um campo de formulário Data/Hora ao seu formulário.
Adicionar validação de restrição de idade
Para validar idades e mostrar mensagens de erro sob o campo do formulário, adicione este código ao seu sítio. Se não tiver a certeza de como adicionar código personalizado, consulte o nosso guia sobre como adicionar 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 );
Certifique-se de que actualiza a ID do formulário (1000) e a ID do campo (25) para corresponder ao seu próprio formulário. Se precisar de ajuda para encontrar estas IDs, consulte o nosso guia sobre como encontrar IDs de formulários e campos.
Com este fragmento de código, se as datas não cumprirem a restrição de idade, será apresentada uma mensagem por baixo do campo quando se clicar no botão Submeter.
Utilização da restrição de idade com campos repetidores
Se o seu campo de data estiver dentro de um campo Repetidor, utilize esta versão 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 );
Utilização da comparação de datas exatas
Para uma verificação de idade mais precisa, como garantir que os utilizadores têm exatamente 18 anos ou mais:
/**
* 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 );
E já está! Implementou com êxito a restrição de idade no seu formulário para o campo de seleção de datas. A seguir, gostaria de personalizar o campo de seleção de data de outras formas? Consulte o nosso tutorial sobre como personalizar as opções do campo de data e hora para obter mais detalhes.