Formulário passo a passo
- Insira o formulário dentro de um contâiner com a classe ui_steps.
- Envolva todos os campos do formulário em outro contâiner com a classe ui_stepsItens.
- Agrupe os campos de cada etapa em contâiners com a classe ui_stepsItem.
- Por fim, insira botões (sejam links, buttons ou etc) com a classe ui_stepsSubmiting em cada etapa para avançar mediante validação.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
- Caso desejado, coloque botões com a classe ui_stepsJumping para avançar sem a submissão/validação da etapa. Para retroceder, use o atributo data-type="prev" neste mesmo botão.
- A última página é destinada para exibir o resumo dos dados cadastrados
- Caso existam campos nessa última etapa, como checkbox para confirmação dos dados ou captcha, use a classe ui_stepsFinalRequired em cada campo para que uma última validação seja realizada.
- A paginação não estará habilitada para clique e navegação
- Para alterar esse comportamento, use em ui_steps o atributo data-pagination e informe true.
- A navegação será habilitada para todas as páginas, mediante validação em cada uma delas. Caso queira alterar esse padrão, use em ui_steps o atributo data-pagination-type e informe o valor desejado: validating_allsteps para habilitar paginação em todas as etapas mediante validação (padrão); passing_allsteps para habilitar paginação em todas as etapas sem validação; validating_onlynext para habilitar paginação apenas para a página seguinte mediante validação; passing_onlynext para habilitar paginação apenas para a página seguinte sem validação.
- As etapas serão identificadas na URL pelo parâmetro step
- Para alterar o nome desse parâmetro, use em ui_steps o atributo data-param e informe o valor desejado.
- O mesmo documento pode ter vários ui_steps (todos independentes entre si).