Adicionar uma Lista Negra de Palavras-Chave em Tempo Real a um Campo de Texto de Linha Única

Gostaria de bloquear palavras específicas em um campo de Texto de Linha Única antes que um usuário envie seu formulário? Por padrão, a proteção contra spam do WPForms é executada quando o formulário é enviado. Com um pequeno trecho de JavaScript, você pode adicionar uma lista de bloqueio de palavras-chave em tempo real que exibe uma mensagem de erro assim que uma palavra restrita é inserida.

Neste tutorial, mostraremos como usar wpforms_wp_footer_end e jQuery Validate para adicionar validação de palavras-chave no lado do cliente que se comporta de forma semelhante a uma máscara de entrada.

---

Criação do Formulário

Primeiro, crie seu formulário e adicione um campo de Texto de Linha Única que você deseja proteger com a lista de bloqueio de palavras-chave. Você também pode adicionar quaisquer outros campos que precisar para o seu formulário.

Se precisar de ajuda com esta etapa, consulte nosso guia sobre como criar seu primeiro formulário no WPForms.

Anote:

• O ID do Formulário
• O ID do Campo do campo de Texto de Linha Única que você deseja validar

Você precisará desses valores ao configurar o trecho abaixo.

Adicionando o Trecho de Código

Para adicionar a lista de bloqueio de palavras-chave em tempo real, use o seguinte trecho. Este exemplo imprime um pequeno bloco de JavaScript no rodapé do seu site usando a ação wpforms_wp_footer_end.

Se precisar de ajuda para adicionar código personalizado, consulte nosso tutorial sobre como adicionar PHP ou JavaScript personalizado ao WPForms.

Depois que este código for adicionado e salvo, visite uma página com seu formulário no front-end e teste o campo Texto de Linha Única digitando uma das palavras bloqueadas.

Você deverá ver uma mensagem de validação vermelha abaixo do campo assim que uma palavra-chave restrita for detectada, sem precisar enviar o formulário.

Personalizando o Trecho

Para adaptar este exemplo ao seu formulário, edite a seção de configuração na parte superior do script usando os números das linhas da captura de tela.

• ID do Formulário
  Na linha 14:
  var targetFormID = 100; // Substitua pelo ID do seu formulário
  Altere 100 para o ID do formulário que contém seu campo de Texto de Linha Única.
• ID do Campo
  Na linha 15:
  var targetFieldID = 1; // Substitua pelo ID do seu campo
  Altere 1 para o ID do campo de Texto de Linha Única que deve usar a lista de bloqueio de palavras-chave.
• Palavras-chave bloqueadas
  Na linha 16:
  var blockedWords = ['palavraruim', 'spam', 'indesejado']; // Lista de palavras-chave a serem bloqueadas
  Substitua as palavras de exemplo pela lista de palavras-chave que você deseja bloquear. Você pode adicionar ou remover itens do array conforme necessário.
• Mensagem de erro
  Na linha 17:
  var customError = 'Este conteúdo contém palavras-chave restritas.';
  Atualize o texto entre aspas para alterar a mensagem que aparece abaixo do campo quando uma palavra-chave restrita é detectada.

Perguntas Frequentes

Abaixo, respondemos a algumas das principais perguntas sobre o uso deste filtro de palavras-chave personalizado.

Como isso é diferente do filtro de palavras-chave integrado na Proteção contra Spam e Segurança?

O filtro de palavras-chave integrado é configurado em Configurações » Proteção contra Spam e Segurança e se aplica a todos os formulários e campos do seu site quando o formulário é enviado. Este trecho visa apenas um campo específico de Linha de Texto Único em um formulário e mostra a mensagem de erro instantaneamente enquanto o usuário está digitando.

O filtro de palavras-chave padrão é a principal maneira de bloquear palavras proibidas em todos os seus formulários e ainda será executado no envio, mesmo que o JavaScript esteja desativado.

Este trecho é melhor usado como uma verificação extra em tempo real para campos importantes onde você deseja feedback imediato.

É isso. Agora você aprendeu como adicionar uma lista de bloqueio de palavras-chave em tempo real a um campo de Linha de Texto Único usando uma regra de validação JavaScript personalizada.

Você gostaria de mostrar ou ocultar condicionalmente o botão Enviar em um formulário com base em um dos seus campos? Confira nosso tutorial sobre Como Mostrar Condicionalmente o Botão de Envio.

Ação de Referência

wpforms_wp_footer_end