JAVASCRIPT

Validando formularios com Wordpress

12/03/2017JAVASCRIPT

Quem trabalha com formulários de contato no Wordpress com certeza deve conhecer o plugin Contact Form 7. O plugin permite validar os campos do formulário após o envio. Neste artigo, eu vou mostrar como você pode validar os dados antes de postar através da utilização de um código JavaScript personalizado.

 

Primeiro, vamos dar uma olhada no formulário de exemplo criado no Contact Form 7

 

Neste exemplo, temos no topo o shortcode que vai ser inserido na pagina ou postagem onde vamos inserir o formulário. O formulário tem os campos de nome, email, telefone, assunto e mensagem. Perceba que os campos tem validações referentes a obrigatoriedade do preenchimento e tamanho das informações. Porém, essas validações serão feitas após postar os dados.

 

Para fazer uma validação própria do lado do cliente, vamos precisar alterar o shortcode. Veja a tela a seguir:

 

Nesta tela onde inserimos o conteúdo de uma página, alteramos o shortcode, inserindo um parâmetro chamado "html_id" com o nome de "formulário_contato". 

 

Depois de salvar sua alteração, abra o seu formulário de contato no site. Abra o código fonte no navegador. Veja o exemplo abaixo:

 

Você vai perceber que a tag html do formulário ganhou um atributo "formulario_contato". Cada campo do formulário tem um atributo "name" com o nome igual ao que foi definido no plugin.

 

Você pode no seu arquivo de template inserir um código javascript próprio. Para ficar mais organizado, você pode criar um arquivo JS próprio e fazer o include junto com os demais scripts.

 

Para vincular um código javascript ao evento submit do seu formulário, você vai precisar do seguinte código:

try {

document.getElementById("formulario_contato").addEventListener("submit", checkform_contato, false);

} catch (error) {

//Nada a fazer

}

 

 

Neste exemplo, a estrutura "try" vai tentar vincular a execução da função "validar_formulario" ao evento submit do formulario com id chamado "formulario_contato". 

 

 

Dentro desta função personalizada chamada "validar_formulario" você pode validar os campos do seu formulário. Para quem conhece Javascript, o código não tem segredos:

 

O link para download segue abaixo:

Ver conteúdo do arquivo

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

Calculando a idade com JavaScript
27/10/2019JAVASCRIPT

Calculando a idade com JavaScript

Um exemplo de como calcular a idade usando JS

Saiba mais...
Compiladores online
15/05/2022JAVASCRIPT

Compiladores online

Rode seu código direto do navegador

Saiba mais...

Conteúdo sobre banco de dados sem complicação!

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo