Como Identificar Campos com Erro no JetFormBuilder

O JetFormBuilder é um excelente plugin para criar formulários no WordPress, mas um problema comum é que, quando um erro ocorre no envio, ele não informa exatamente qual campo está causando o problema. Isso pode ser frustrante para os usuários e administradores do site.

Neste artigo, vamos adicionar um código que identifica e destaca automaticamente os campos com erro, exibindo um alerta para facilitar a correção.

 

Problema: Falta de Identificação dos Erros

Quando um formulário do JetFormBuilder apresenta erros, ele normalmente impede o envio sem fornecer detalhes sobre quais campos precisam ser corrigidos. O usuário pode acabar tentando adivinhar o problema, o que prejudica a experiência.

Para resolver isso, adicionaremos um código JavaScript ao site que:

• Captura os erros dos campos após a tentativa de envio.
• Destaca os campos problemáticos com uma borda vermelha.
• Exibe um alerta com o nome do campo que contém erro.
• Registra os erros no console para análise técnica.

Implementação do Código

O código abaixo pode ser inserido no arquivo functions.php do seu tema filho ou em um plugin de snippets personalizado.

Código PHP + JavaScript

add_action(‘wp_footer’, function() {
?>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
document.body.addEventListener(“submit”, function(event) {
let form = event.target.closest(“.jet-formbuilder”);
if (!form) return;

setTimeout(() => {
let errorFields = form.querySelectorAll(“.jet-formbuilder-field–error”);

if (errorFields.length > 0) {
errorFields.forEach(field => {
let fieldName = field.getAttribute(“name”) || field.id || “Campo Desconhecido”;
field.style.border = “2px solid red”; // Destaca o campo
console.error(`Erro no campo: ${fieldName}`); // Log no console
alert(`Erro no campo: ${fieldName}`); // Alerta visível para o usuário
});
}
}, 500); // Tempo para verificar erros após envio
}, true);
});
</script>
<?php
});

 

Como Funciona?

1. Captura o evento de envio do formulário.
2. Aguarda um curto período para verificar se surgiram erros.
3. Seleciona todos os campos que contêm a classe .jet-formbuilder-field--error, que é adicionada automaticamente pelo plugin quando há um erro de validação.
4. Destaque visual: Adiciona uma borda vermelha nos campos problemáticos para chamar a atenção do usuário.
5. Exibição de alerta: Um alert() aparece informando o nome do campo com erro.
6. Log no console: Se você estiver inspecionando o site (F12 → Console), poderá ver uma lista detalhada dos campos que falharam.

 

Teste e Ajustes

• Teste em um formulário que tenha regras de validação (como campos obrigatórios).
• Se precisar personalizar a aparência do erro, altere o CSS no field.style.border.
• Caso os nomes dos campos estejam indefinidos, verifique se o JetFormBuilder está configurado corretamente com IDs ou name em cada campo.