Nesse conteúdo quero mostrar a você como validar formulários criados com o Elementor PRO através do backend usando Ajax (hooks/API).
Torne-se Especialista em Elementor…
Faça o Curso Mais Completo e Acessível do Brasil!
MATRICULE-SE AGORA
Veja o vídeo:
[embedyt]https://www.youtube.com/watch?v=VDadtQaAatI[/embedyt]
O Elementor Pro é uma excelente opção se você deseja ter uma suíte quase completa para criar sites, contendo funcionalidades úteis e produtivas.
Obtenha o Elementor PRO – vale muito a pena.
Como você deve saber, o Elementor trabalha com widgets, e um dos mais importantes é o de formulários ou também chamado de Elementor Forms.
Como um WordPress Form Builder (construtor de formulários), o Elementor Forms nos permite criar formulários bastante funcionais para diferentes necessidades, rapidamente.
Além disso, tem as “Ações após enviar” (ações após pressionar o botão enviar) que são bastante úteis, e o melhor de tudo, que podem ser combinadas.
Desse modo, por exemplo, você poderia ter essa combinação:
Portanto, Formulários do Elementor são excelentes e não perdem muito para o plugins específicos e mais robustos de formulários, como Gravity Forms.
No entanto, há um problema se você quiser ter um formulário mais sério, porque não há validações realmente úteis, nativamente, no Elementor.
Como assim? O Elementor possui apenas validação básica de frontend usando correspondências e obrigatoriedade nos campos.
Contudo, alguém usando o Inspetor (Element Inspector) de qualquer navegador pode modificar o código e enviar qualquer informação sem ser validada de acordo.
Por exemplo, você pode abrir o Inspetor de Elementor e trocar o tipo de campo do e-mail para tentar enviar sem validar esse e-mail.
Agora, algumas pessoas optam por usar bibliotecas Javascript ou jQuery puras para validar os formulários, e isso parece até uma coisa interessante.
Entretanto, isso traz outro problema que é adicionar um peso adicional ao que já possui o Elementor e suas bibliotecas, comprometendo a performance.
Além disso, se o usuário sabe desativar o Javascript, todas essas validações vão pelo ralo.
Sim, há uma solução para fazer as validações – por backend.
Desta forma, mesmo que o usuário utilize o inspetor ou desabilite o javascript, os dados ainda serão validados.
A boa notícia, é que o Elementor Forms possui Hooks que permitem validação de backend (server-side) que podem retornar mensagens de erro em tempo real via Ajax.
Veja a documentação em Elementor Forms API.
Para fazer isso, você deve criar um plugin ou editar o arquivo functions.php do seu tema (recomendo trabalhar com um tema filho) para adicionar essas validações.
Aqui está um exemplo para uma validação global:
// Validate the Ticket ID field is in XXX-XXXX format.
add_action( 'elementor_pro/forms/validation', function ( $record, $ajax_handler ) {
$fields = $record->get_field( [
'id' => 'ticket_id',
] );
if ( empty( $fields ) ) {
return;
}
$field = current( $fields );
if ( 1 !== preg_match( '/^\w{3}-\w{4}$/', $field['value'] ) ) {
$ajax_handler->add_error( $field['id'], 'Invalid Ticket ID, it must be in the format XXX-XXXX' );
}
}, 10, 2 );Usando o Hook elementor_pro/forms/validation você pode fazer a validação em todas as submissões de formulários do Elementor.
Os argumentos que vemos acima para a função são os seguintes:
| Argumento | Modelo | Descrição |
|---|---|---|
record | Form_Record | O registro enviado. |
ajax_handler | Ajax_Handler | O componente Manipulador Ajax. |
Você também pode fazer validações por tipo de campo, usando o Hook elementor_pro/forms/validation/{$field_type}.
Isso vai permitir validar tipos de campo individuais, como por exemplo os campos de telefone, email, etc.
Aqui está um exemplo:
// Validate the Tel field is in XXX-XXX-XXXX format.
add_action( 'elementor_pro/forms/validation/tel', function( $field, $record, $ajax_handler ) {
// Match this format XXX-XXX-XXXX, 123-456-7890
if ( preg_match( '/[0-9]{3}-[0-9]{3}-[0-9]{4}/', $field['value'] ) !== 1 ) {
$ajax_handler->add_error( $field['id'], 'Please make sure the phone number is in XXX-XXX-XXXX format, eg: 123-456-7890' );
}
}, 10, 3 );Os argumentos que vemos acima são os seguintes:
| Argumento | Modelo | Descrição |
|---|---|---|
field | Array | O campo enviado. |
record | Form_Record | O registro enviado. |
ajax_handler | Ajax_Handler | O componente Manipulador Ajax. |
Esses são recursos bem úteis que vão facilitar bastante a validação de formulários do Elementor do lado do servidor (backend).
Agora, por exemplo, a validação de e-mails no Elementor, quando você usa o tipo de campo e-mail, verifica se há um arroba (@) e um ponto (.), o que não é tão preciso.
Assim, poderíamos criar uma função de validação da seguinte forma:
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
if ( !filter_var( $field['value'], FILTER_VALIDATE_EMAIL ) ) {
$ajax_handler->add_error( $field['id'], 'Insira um e-mail válido.' );
}
}, 10, 3 );Então, você pode ter mais precisão usando a função filter_var() do PHP ou mesmo a função is_email() do WordPress para ser mais eficaz.
Cada campo no Elementor Forms tem um ID que podemos personalizar – isso é um recurso muito útil e uma prática recomendada.
Graças a isso, podemos fazer uma validação geral em todos os formulários do nosso site onde os campos tenham o mesmo ID, o que vai facilitar bastante.
Então, vamos criar uma função extra que nos permita obter um campo pelo ID inserido, da seguinte forma:
function elementor_get_field($id, $record){
$fields = $record->get_field([
'id' => $id
]);
if(empty($fields)){
return false;
}
return current($fields);
}E aqui está a função de exemplo que usei no vídeo que mostrar como usar a função acima e executar validações em diversos campos:
function valida_campos( $record, $ajax_handler ) {
if($field = elementor_get_field('aceita_termos', $record)){
if($field['value']!= 'on'){
$ajax_handler->add_error( $field['id'], 'Você precisa aceitar os termos!' );
}
}
if($field = elementor_get_field('idade', $record)){
if(empty( trim($field['value']))){
$ajax_handler->add_error( $field['id'], 'Insira sua idade' );
}else if(!filter_var(trim($field['value']), FILTER_VALIDATE_INT )){
$ajax_handler->add_error( $field['id'], 'Somente números...' );
}
//
}
if($field = elementor_get_field('nome', $record)){
if(empty( trim($field['value']))){
$ajax_handler->add_error( $field['id'], 'Insira seu nome' );
}else if(3 >= strlen(trim($field['value']) )){
$ajax_handler->add_error( $field['id'], 'Pelo menos 3 caracteres...' );
}
}
}O último passo é acionar essa função no Hook de validação de formulários do Elementor usando add_action:
add_action('elementor_pro/forms/validation','valida_campos', 10, 2);É isso! Acho que com esse base você será capaz de realizar qualquer tipo de validação em formulários do Elementor.
Se você precisar, pode pesquisar no Google sobre funções para validação de campos específicos como CPF, telefones brasileiros, etc.
Eu criei um arquivo com diversas validações no GitHub Gist (veja aqui).
Você gostou desse conteúdo? Deixe um comentário abaixo:
Clique aqui e, em seguida, clique em Permitir na caixa que aparecerá na parte superior da janela, próximo à barra de endereços.
Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes!
Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!
