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

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

Neste tutorial, vamos mostrar-lhe 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 o seu formulário e adicione um campo de Texto de Linha Única que pretende proteger com a lista de palavras-chave. Pode também adicionar quaisquer outros campos de que necessite para o seu formulário.

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

Tome nota de:

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

Precisará destes valores ao configurar o trecho abaixo.

Adicionar o Excerto de Código

Para adicionar a lista 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 o nosso tutorial sobre como adicionar PHP ou JavaScript personalizado ao WPForms.

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

Deverá ver uma mensagem de validação vermelha por baixo do campo assim que uma palavra-chave restrita for detetada, sem necessidade de enviar o formulário.

Personalizar o Trecho

Para adaptar este exemplo ao seu formulário, edite a secção de configuração no topo do script usando os números das linhas da captura de ecrã.

• ID do Formulário
  Na linha 14:
  var targetFormID = 100; // Substitua pelo seu ID de Formulário
  Altere 100 para o ID do formulário que contém o seu campo de Texto de Linha Única.
• ID do Campo
  Na linha 15:
  var targetFieldID = 1; // Substitua pelo seu ID de Campo
  Altere 1 para o ID do campo de Texto de Linha Única que deve usar a lista de palavras-chave.
• Palavras-chave bloqueadas
  Na linha 16:
  var blockedWords = ['palavrafeia', 'spam', 'indesejado']; // Lista de palavras-chave a bloquear
  Substitua as palavras de exemplo pela lista de palavras-chave que pretende bloquear. 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 por baixo do campo quando uma palavra-chave restrita é detetada.

Perguntas Frequentes

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

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

O filtro de palavras-chave incorporado é configurado em Definições » Proteção contra Spam e Segurança e aplica-se a todos os formulários e campos no seu site quando o formulário é submetido. Este excerto visa apenas um campo específico de Texto de Linha Única num formulário e mostra a mensagem de erro instantaneamente enquanto o utilizador está a digitar.

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

Este excerto é melhor utilizado como uma verificação adicional em tempo real para campos importantes onde pretende um feedback imediato.

É tudo. Aprendeu agora como adicionar uma lista de bloqueio de palavras-chave em tempo real a um campo de Texto de Linha Única utilizando uma regra de validação JavaScript personalizada.

Gostaria de mostrar ou ocultar condicionalmente o botão Submeter num formulário com base num dos seus campos? Veja o nosso tutorial sobre Como Mostrar Condicionalmente o Botão de Submissão.

Ação de Referência

wpforms_wp_footer_end