Programação / jQuery

Desenvolva um form-wizard com validação de informações totalmente do zero usando PHP e jQuery

O objetivo desse recurso é capturar as informações de forma segmentada ao mesmo tempo em que é feita a validação dos dados.

Por Gustavo Web

Publicado por Gustavo Web
em 31/08/2018 às 09h29

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve webmaster! Tudo tranquilo? Atendendo o pedido do play dessa semana, vamos criar um form wizard (que são aqueles passoa a passo) e fazer a validação das informações de acordo com o que o usuário informa em cada procedimento.

Esse recurso geralmente é usado quando você tem diversas informações e pode causar um certo cansaço no usuário ao preencher... Se você tiver um form mais extenso, ele pode acabar "desistindo" de preencher todas as informações devido a quantidade.

Quando você faz o uso dessa técnica, você só tem poucos campos ali que parece ser bem rápido responder! Então levando por esse lado, você tem a ter uma maior quantidade de formulários preenchidos.

Além de serem preenchidos, fica mais organizado o tratamento dessas informações porque você trata a cada nova posição que é adicionada.

Material de Apoio

O link do repositório desse projeto está logo abaixo. Temos o diretório _initial como de costume tendo somente uma formatação dos elementos e a arquitetura das pastas que vamos trabalhar.

Toda a programação vamos fazer durante a aula para controlar os eventos, mostrar ou ocultar conteúdos, fazer validações e redirecionar :)

Link para o repo Form Wizard!

Premissa básica

Para que você possa desenvolver um assistente, a primeira coisa que você precisa se preocupar é a ação "vai e vem"! Ou seja, ter uma ação para poder voltar um formulário e outro para ir para o próximo seguindo até o término do preenchimento.

Um ponto que pode ficar confuso, e inclusive é até o que foi soliitado durante esse pedido é o seguinte:

"... mas formulário wizard o botão de submit fica no último passo, porque os anteriores são botões de "next/próximo", que são botões que servem como ações para JS"

Primeiro vamos deixar claro que pode ser que em uma outra modelagem dessas informações, isso pode realmente acontecer... Você ter um único formulário e simplesmente as div's são exibidas e ocultadas e controlada pelos botões. Isso não é impossível de se acontecer!

Maaaas, no nosso caso aqui, vamos sempre submeter o formulário para um controller que será responsável por resgatar cada informação que está sendo passada e vamos validar se é do mesmo tipo que a gente espera e ainda se não temos nenhum outro registro igual dentro da nossa base para não permitir que seja duplicado.

Portanto, sempre as requisições vão chegar até um arquivo .php que será responsável por validar tais dados e dizer se é permitido ir para o próximo passo ou não. Caso tenhamos qualquer tipo de erro, impedimos que o formulário continue sendo preenchido pelo usuário.

Controlador

Se toda informação passa pelo controlador, temos controle absoluto sobre os dados e isso nos permite validar o tipo do campo (um e-mail, um cpf, um cep...), fazer uma pesquisa na base de dados para saber se já existe o e-mail cadastrado no banco, ou até mesmo um cpf para não permitir que duplique os dados.

Se for o caso, é claro que você pode adicionar uma restrição no banco de dados para previnir isso... Mas aqui a gente ta jogando toda essa responsabiidade para a aplicação.

Com isso a gente resolve um outro ponto que foi levantado nesse pedido, que ao invés de informar todos os dados e somente no último passo ter as validações e depois o usuário ter que ficar voltando ou avançando cada etapa... A gente faz cada coisa no seu tempo!

O código fica organizado, a tela fica organizada e a cabeça do usuário também!

Feedback

Me conta aqui abaixo o que você achou dessa aula! Vou estar disponível aqui nos comentários para que te ajudar :)

Compartilhe:

Em Programação:

Deixe seu comentário: