O projeto está inativo

Cadastro completo em PHP com validações back-end e front-end

Neste exemplo criaremos um formulário de cadastro, utilizando o Bootstrap, as bibliotecas jQuery para facilitar o envio do formulário por Ajax, jQuery Validate para validar o front-end, jQuery Masked Input para adição das máscaras aos campos, Holder.js para criação de placeholders para as imagens, além de WebAPIs, como FormData, para construir os dados enviados na requisição, e FileReader para criação de uma área de pré-visualização da imagem selecionada. No back-end, utilizamos o PHP e classes criadas para esse projeto. A partir desse cenário, demonstramos como realizar uma dupla verificação dos dados, front-end e back-end. Assim, oferecemos uma peça de código de validação que você pode utilizar como fonte de consulta ou em seus próprios projetos.

Abrir Menu Download Ver projeto
Marcar como favorito 14 0 Anotar Tire suas dúvidas

1 - Criando um formulário de cadastro com validação

Utilizando HTML, CSS, JavaScript, Bootstrap, jQuery e PHP criamos neste exemplo um formulário de cadastro com validação front-end/back-end.

Na página de cadastro utilizamos CSS para pequenas customizações, mas a maior parte do trabalho foi poupada pelo Bootstrap.

A validação front-end foi feita com jQuery, assim, ao término da digitação em cada campo da seção de dados de cadastro, como demonstra a Figura 1, uma mensagem é exibida para o usuário em caso de erro.

Uso do jQuery nas mensagens
Figura 1. Uso do jQuery nas mensagens

Uma área de pré-visualização, como mostra a Figura 2, se encarrega de exibir a imagem escolhida pelo usuário. Essa funcionalidade foi implementada com a API FileReader do HTML5, que também usamos para validar se a extensão é JPG, GIF ou PNG.

Área de pré-visualização
Figura 2. Área de pré-visualização

Abaixo da seção de dados de cadastro temos os dados pessoais, apresentadas na Figura 3. Eles não são obrigatórios ou validados, mas possuem máscaras que auxiliam o preenchimento.

Dados pessoais
Figura 3. Dados pessoais

Para o envio do formulário usamos as funções Ajax da jQuery e a API FormData do HTML5, que adiciona a imagem na requisição.

No back-end, os dados obrigatórios passam por validação adicional, inclusive a imagem. Ao final dessa verificação é gerado um JSON como resposta. Sendo assim, caso um dado inválido venha do formulário, uma mensagem de erro será exibida sem que, para isso, a página seja recarregada, conforme demonstrado na Figura 4.

Validação dos dados
Figura 4. Validação dos dados

Auxiliando as tarefas realizadas pelo back-end temos classes criadas especificamente para este exemplo. Essas classes abstraem muito da complexidade envolvida na validação e gravação de arquivos no servidor. São elas:

http/Request

Facilita o acesso aos dados enviados na requisição.

http/Response

Auxilia a geração do JSON de resposta.

io/File

Representa um arquivo e possibilita a verificação de integridade de forma facilitada.

io/FileWriter

Abstrai a rotina de gravação do arquivo temporário no servidor.

regex/Regex

Possui métodos e expressões regulares para a validação.

Sugestão de conteúdo

Para aprofundar seus estudos, sugerimos que assista aos seguintes exemplos com tema relacionado:

Links úteis:

Ficou com alguma dúvida?