Validando um formulário PHP com jQuery - Tutorial Completo

Umas das funções mais complicadas para os desenvolvedores Web, com toda certeza é a validação de conteúdo dinâmico de formulários PHP, como por exemplo, formulários de comentário, de cadastro, ou coisas do tipo.

Normalmente quando validamos o formulário somente com PHP (que é uma linguagem server-side), a página deve ser atualizada para que o sistema possa validar os dados enviados, assim, se algo estiver errado e não passar na validação, o usuário perde tempo tendo que digitar tudo novamente.

Já se utilizarmos apenas o jQuery ou javascript para validar o formulário, algum engraçadinho pode desativar o motor de javascript do navegador de Internet, e passar facilmente por sua validação, fazendo assim a famosa Injection em seu servidor Mysql, podendo até mesmo detonar com todo o seu banco de dados.

Neste caso, o mais certo a ser utilizado, é a validação dos dados do formulário utilizando os dois métodos (tanto PHP quanto o jQuery / Javascript), assim teremos a garantia de que o usuário não irá perder tempo tendo que digitar tudo novamente, e também teremos a certeza de que nosso banco de dados estará livre da injection que tanto afeta sites em php

Vamos aos fatos:

Considere um formulário HTML que envia os dados para um arquivo PHP. Seu desenvolvedor deseja obter o Nome do leitor, o Email do leitor, o Site do leitor (Se ele tiver um site), e a Mensagem que o leitor deseja deixar.

Os dados serão enviados para uma tabela no Mysql que contém os mesmos campos do formulário:

Tabela do Banco de Dados (MySQL)

CREATE TABLE `bd`.`tabela` (
`id` INT( 255 ) NOT NULL AUTO_INCREMENT ,
`nome` VARCHAR( 255 ) NOT NULL ,
`email` VARCHAR( 255 ) NOT NULL ,
`site` VARCHAR( 255 ) NOT NULL ,
`mensagem` TEXT NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM ;

Campo id será incrementado automaticamente, o campo nome VARCHAR 255, o campo email VARCHAR 255, o campo site VARCHAR 255 e o campo mensagem TEXT (sem limite), no seu banco de dados MySQL.

Então vejamos o formulário que irá enviar os dados:


OBS.: Você poderá baixar todos os dados deste tutorial, ao final deste artigo.

Validando o formulário em PHP

No caso desse formulário, teremos de validar os dados primeiramente em PHP, pois, se fizermos primeiramente em jQuery, será meio chato testar a validação PHP, então vejamos o que fazer.

Verificando se os valores foram enviados

A primeira coisa que devemos fazer, é verificar se os valores do formulário foram enviados para o arquivo em questão, em nosso caso, estamos utilizando o mesmo arquivo do formulário para receber os valores com <?php $_SERVER['PHP_SELF'];?> no action do form, portanto, iremos modificar um pouco nosso formulário incrementando a função if do PHP no mesmo, ou seja, se (if), o formulário foi enviado, capturamos os dados, diferente disso (else), não fazemos nada, veja abaixo:


A partir desta parte do tutorial, irei tratar apenas dos dados recebidos do formulário, e apenas ao final do artigo, mostrarei todo o formulário, portanto, tudo que for descrito daqui para baixo, será colocado no local onde comentei // CAPTURAMOS OS DADOS AQUI. Esta é a área onde o PHP irá considerar que os dados foram enviados, então vamos lá!

Tratando os valores recebidos pelo POST do formulário

Uma vez sabendo que o leitor do seu site enviou os dados do form (submeteu o formulário), temos que realizar o tratamento dos valores enviados, isso é um fato muito delicado, pois, não queremos nada que possa atrapalhar o bom desempenho do nosso site, ou até mesmo danificar nosso banco de dados.

Por onde começar?

Como você já deve ter percebido, em nosso arquivo estamos checando se o usuário postou todos os valores (mesmo que nulos), e garantindo que os valores só serão tratados se o usuário postar o form. Mas como eu faço para tratar os valores?

Este é um ponto bem simples, se o usuário postou tudo o que eu queria que fosse postado, o PHP está pronto para capturar os dados, então fazemos isso da seguinte maneira:

1 - Criamos uma função que vai tratar os valores do PHP, veja um exemplo (Continuando da parte // CAPTURAMOS OS DADOS AQUI do formulário anterior):


Na função acima, estamos pegando um valor qualquer, e fazendo uma pequena "Limpeza" no mesmo, com a função trim(), removemos os espaços iniciais e finais do valor, com a função strip_tags(), cortamos qualquer tag HTML ou PHP do valor, e por fim, com a função addslashes(), adicionamos uma barra invertida antes de cada aspa dupla ou simples (evitando assim a Inection).

Mas como utilizar esta função em minhas variáveis?

Bem, o modo simples de utilizar a função que você criou acima, é descrito no frame abaixo:


Como você pôde ler nos comentários do frame acima, existe uma variável simples sem a função chamada $nome, e outra variável de mesmo nome sendo tratada pela função, este segundo modo, é o mais correto e seguro para ser utilizado, portanto, esqueça o primeiro formato, a partir daqui, utilizaremos sempre o segundo formato para setar todas as outras variáveis.

Setando o restante das variáveis

Como você já deve ter entendido, agora vamos setar o restante de todas as variáveis, e passaremos a tratar o valor enviado pelo usuário, utilizando estas variáveis.

Por questão de organização, prefiro colocar o nome de cada variável, referente ao campo do formulário a que ela se refere. Exemplo: Nome, Email, Site... e assim por diante, portanto, veja abaixo como ficaram nossas variáveis:


Só para reforçar, as variáveis de Nome, Email, Site e Mensagem, estão capturando os valores do POST do formulário de envio, além disso, elas estão sendo tratadas pela função descrita anteriormente, com isso já temos os dados enviados pelo usuário da forma que nosso Banco de Dados irá aceitar.

Mas ainda faltam muitas coisas que temos que validar, por exemplo, quais campos desse formulário serão obrigatórios? Bem, analisando o formulário, podemos ter a certeza que um usuário tem um Nome, ele também deve ter um Email, e se ele está utilizando o nosso formulário, com toda certeza ele deve querer dizer algo, portanto, o campo Mensagem também deverá ser obrigatório. Então o campo Site não é obrigatório em nosso POST, o resto terá que ter algum valor, vejamos o que fazer:

Logo abaixo das variáveis que setamos no frame anterior, iremos utilizar as funções IF e ELSE do PHP, para checar se os campos foram enviados.


Basicamente fizemos com que o PHP verificasse se as variáveis de nome, email e mensagem, possuem valores com o if(!empty( VALOR )){ AÇÃO } e caso os valores sejam nulos (0), imprimimos um erro na tela com else { AÇÃO }.

Se os valores são nulos, o seu script irá morrer no erro Existem campos obrigatórios em branco, mas e se os valores não forem nulos? Aí vamos continuar nosso script.

Agora podemos verificar várias coisas, por exemplo se o email da pessoa está correto, ou se o site da pessoa também está correto, então vejamos o frame abaixo:


OBS.: Para encurtar um pouco nosso tutorial, a partir daqui, iremos tratar apenas da área em que vamos trabalhar, mas não se preocupe, vou mostrar exatamente onde estamos em nosso script.

Continuando da parte // CONTINUAMOS O SCRIPT # ...

Agora que checamos se o email tem o formato real de um e-mail, podemos passar para o campo Site e verificar se a URL realmente tem o formato de URL, então vejamos o frame abaixo:


Bem, agora que já checamos se os campos estão nulos, se o email e o site são válidos, podemos enviar os dados para o servidor MySQL, portanto, onde está escrito o último // CONTINUAMOS O SCRIPT no frame acima, podemos incluir nosso arquivo de conexão, ou criar as linhas de comando diretamente neste local, assim continuamos até enviar os dados para a tabela no MySQL.

Nota: Não vamos abordar comandos MySQL neste tutorial, qualquer dúvida, deixe seu comentário!

Validando o formulário com jQuery

Agora que já tratamos os valores em PHP, vamos partir para a parte interessante do Tutorial, o jQuery.

Nós já criamos um mini-curso de jQuery aqui no TEO, caso tenha interesse em saber um pouco mais sobre a biblioteca, leia o artigo Como instalar e utilizar o jQuery e suas funções [mini - curso grátis].

Instalando o jQuery

Quando vamos utilizar o jQuery em nossas páginas HTML, PHP ou qualquer outra, é necessário que o mesmo esteja instalado entra as tags

e do nosso documento, veja no exemplo abaixo:


Onde está escrito:

<script language='javascript' type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>

É a instalação do jQuery, leia mais a respeito no artigo Como instalar e utilizar o jQuery e suas funções [mini - curso grátis].

Nossa validação do formulário, virá após este trecho do código, e ficará entre <script language='javascript' type='text/javascript'> e </script>

Para atestar que nosso jQuery está instalado corretamente, tente fazer como o documento abaixo:


Como você deve ter notado, criamos as tags do script e abrimos a função do jQuery, depois mencionamos o comando alert('Olá');, isso que dizer, que ao acessar o documento, deverá aparecer um alerta dizendo Olá para o usuário, com isso temos a certeza que o jQuery está funcionando perfeitamente.

Relembrando: Tudo o que está sendo descrito aqui, já foi abordado com mais detalhes no artigo Como instalar e utilizar o jQuery e suas funções [mini - curso grátis], recomendamos sua leitura.

Modificando o formulário

Ao utilizar o jQuery, utilizamos seletores para capturar determinadas partes do documento, neste caso, determinadas partes do formulário, portanto, para termos a certeza de que tudo irá funcionar perfeitamente em todos os navegadores, colocaremos um ID em cada um dos campos que necessitam validação, veja abaixo as partes destacadas em vermelho:


Como você de ter percebido nas partes destacadas em vermelho no frame acima, temos um id para o formulário (#form_id), outro para o nome (#nome_id), outro para o email (#email_id), outro para o site (#site_id) e por fim, outro para a mensagem (#mensagem_id), iremos chamar todos os IDs na hora necessário dentro do nosso comando jQuery.

Setando as variáveis para o jQuery com Javascript

O jQuery possibilita uma extrema facilidade para escrevermos em javascript, entretanto, a criação de variáveis é idêntica tanto para o jQuery e para o Javascript, para quem não entende muito do assunto, o jQuery é uma biblioteca javascript, então, quando falamos jQuery, basicamente estamos falando em várias linhas de comando que John Resig (desenvolvedor do jQuery), criou utilizando o javascript.

Mas deixemos a história de lado e vamos criar as variáveis, veja abaixo:


Para criarmos uma variável, utilizamos var + O nome que daremos à variável + = + O valor da variável. É tudo bem simples, entretanto, no nosso caso, utilizaremos jQuery para dar o valor para nossas variáveis, por exemplo, para pegarmos o valor digitado no campo nome, utilizamos da seguinte maneira:

jQuery + ( + " + # + nome_id + " + ) + . + val + ( + ) + ;

ou seja

jQuery("#nome_id").val();

Então o comando completo para setar nossa variável nome_id é:

var nome_id = jQuery('#nome_id').val();

Assim criamos todas as nossas variáveis.

Utilizando a função .submit() do jQuery

Agora que temos nossas variáveis, vamos incrementar o documento com a função .submit() do jQuery, para isso, vamos criar mais uma função depois da função READY, e fechamos depois das variáveis setadas, veja abaixo:


Repare nas partes em vermelho do documento, que criamos outra função .submit() dentro do nosso documento, e dentro dessa função, temos nossas variáveis e também teremos a validação dos campos.

Verificando se os campos estão nulos

Agora, como fizemos há pouco em PHP, vamos proibir que o leitor envie o formulário em branco, ou seja, sem valor, veja abaixo:


Repare nos campos em vermelho do frame acima, estamos dizendo que se (if) o campo nome_id ou (||) o campo email_id ou (||) o campo mensagem_id estiverem em branco (== ''), alertamos o usuário (alert()) e o formulário não é enviado (return false;).

Agora vamos verificar o email, veja abaixo:


Seguindo o mesmo padrão, a área em vermelho mostra onde validamos o email, agora vamos validar o site:


E está pronto, veja abaixo como ficou nosso documento completo e teste utilizando o frame abaixo:


Caso queira visualizar o código completo deste arquivo, clique aqui.

Já para baixar o arquivo deste tutorial, clique aqui.

Tags: Validando Formulário PHP jQuery Tutorial Completo


Comentários