Gostaria de adicionar restrições de idade ao seletor de datas de seu formulário? Este guia mostrará como validar idades e exibir mensagens personalizadas quando as datas não atenderem aos seus requisitos. Demonstraremos isso usando um formulário de registro de aula de balé para crianças que aceita apenas crianças entre 12 e 18 anos de idade.
Configuração de seu formulário
Na primeira etapa, basta criar um novo formulário e adicionar um campo de formulário de data/hora ao formulário.
Adição de 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 site. Se você não tiver certeza de como adicionar código personalizado, consulte nosso guia sobre como adicionar trechos 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 atualizar o ID do formulário (1000) e o ID do campo (25) para que correspondam ao seu próprio formulário. Se precisar de ajuda para encontrar esses IDs, consulte nosso guia sobre como encontrar IDs de formulários e campos.
Com esse trecho de código, se as datas não cumprirem a restrição de idade, uma mensagem será exibida sob o campo quando o botão Enviar for clicado.
Uso da restrição de idade com campos repetidores
Se o seu campo de data estiver dentro de um campo Repetidor, use 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 );
Uso da comparação exata de datas
Para uma verificação de idade mais precisa, como garantir que os usuários tenham 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 é isso! Você implementou com êxito a restrição de idade em seu formulário para o campo de seleção de data. Em seguida, você gostaria de personalizar o campo seletor de data de outras maneiras? Confira nosso tutorial sobre como personalizar as opções do campo de data e hora para obter mais detalhes.