jquery

/ Tutoriais

Utilizando o Plugin Jquery Validation com JSON e PHP

tutorial

No desenvolvimento de websites é comum a utilização de formulários de contato para o envio de informações.Porém, na maioria das vezes, validar os campos acaba sendo um trabalho chato e que demanda bastante tempo. Abordarei neste artigo uma solução prática para reduzir o tempo de desenvolvimento utilizando o Plugin Jquery Validation.Lembrando que este artigo focará na utilização do plugin Jquery Validation e não na utilização do JSON!

O plugin, como o próprio nome já diz, utiliza o framework Jquery para o seu funcionamento.

Primeiramente é necessário incluir a biblioteca Jquery e os arquivos do Plugin Jquery Validation que podem ser encontrados nos links abaixo:

Jquery: http://jquery.com/

Jquery Validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Os arquivos acima devem ser inseridos dentro da tag <head> do seu arquivo como demonstrado abaixo:

Após carregá-los , todas as funcionalidades do plugin estarão disponíveis para serem utilizadas em seu projeto.

Uma das grandes vantagens do uso do Jquery é poder utilizar funcionalidades muito interessantes com a escrita de poucas linhas de código.

Seguindo a implementação, após o carregamento, iremos criar o html do formulário que será validado posteriormente.

Com a estrutura do html pronta, precisaremos inserir o código javascript para implementar o plugin.

Observe que no código javascript primeiramente há uma função chamada EnviaForm.Essa função é responsável por recuperar todos os valores do formulário utilizando a função val() do jquery e logo após submetê-las via JSON a um arquivo php que receberá todas as informações passadas e utilizará as mesmas para desempenhar outras tarefas, como enviá-las por e-mail, por exemplo, ou salvá-las em um banco de dados.

Logo abaixo está o código responsável por efetuar a validação do formulário.Quando o botão de envio do form é acionado, o javascript recupera o formulário e submete a função “validate”, conforme o código.Daí em diante, o plugin faz toda a verificação dos campos e, caso haja campos vazios ou em formatos incompatíveis com as configurações, ele acusa um erro de validação, impossibilitando a sequência do envio do form até que os dados sejam corrigidos.

Função EnviaForm

Abaixo segue a explicação linha por linha do código acima.

Linha 3 – Adiciona uma imagem de Loading no formulário

Linha 5 – Oculta o botão de envio para que o usuário não clique novamente, fazendo
uma nova requisição.

Linha 7 – Utiliza-se o JSON para recuperar os valores do formulário e
submetê-los a um arquivo php.Nessa linha o JSON é chamado, inserindo o caminho do
arquivo php que receberá esses valores.

Linha 9 à 13 – A função val() recupera os valores e submete ao rótulo inserido.
É necessário a utilização de identificadores para que o jquery identifique o campo correto
e recupere o seu valor.

Linha 15 à 31 – Função de retorno que irá tratar o resultado da operação
que será realizada no arquivo php.Por exemplo, se for o envio de um e-mail, no código,
deverá ser inserido uma msg de erro ou de envio com sucesso!
Essa mensagem retornará à essa função e o mesmo será exibido no formulário.
No exemplo acima, supondo que o código do php é o envio de um e-mail,
todos os campos estão sendo zerados caso o envio tenha sido um sucesso e
logo depois a mensagem de retorno está sendo exibida.

Lembrando que os valores poderão ser recuperados no arquivo php utilizando $_GET ou $_POST.O rótulo que deverá ser chamado tem que ser igual ao que foi inserido no JSON.
Exemplo:

Validação do Formulário

Linha 4 – Ao clicar no botão de envio do form, o validate busca o

formulario através do identificador “#formulario” e submete a
função validate.Na função validate, há o parâmetro submitHandler, responsável por
submeter o formulário à
função inserida após a validação.

Linha 5 à 17 – Configurações dos campos(campos obrigatórios, campos de e-mail,etc)

Linha 18 à 29 – Mensagens que serão exibidas caso haja um erro de validação.

Resumo:

Quando um usuário preencher o formulário e acionar o botão de envio, o validate buscará o formulário e fará a leitura de todos os campos conforme as configurações das “rules”.Caso esteja algo errado, o campo exibirá a mensagem de erro que foi configurada.Se estiver tudo correto, ele chama a função EnviaForm, que recuperará todos os valores dos campos do form e submeterá a um arquivo php.O retorno do php deverá retornar as informações em formato JSON que serão manipulados na função de retorno.

Screenshot do funcionamento do plugin:

Além das opções mencionadas nesse artigo, existem diversas outras funcionalidades que o plugin permite.Caso queira utilizar outras opções, acesse a documentação do Plugin no endereço http://bassistance.de/jquery-plugins/jquery-plugin-validation/



Virtualize Soluções Digitais

Empresa especializada na criação de sites, desenvolvimento de jogos, de aplicativos para celular e para redes sociais como o Facebook. Localizada em Salvador - BA.