Formulário mult step - validação..

[Videres 3]

Eae galera blz?

Estou sentindo muita dificuldade para validar um formulario por etapas.. ou seja só passar para próxima etapa após o preenchimento de todos os campos da etapa atual...

 

O problema surge quando tento travar a etapa atual caso todos os campos n estejam preenchidos.. por falta de conhecimento n estou achando o cód q simplesmente bloqueia a etapa atual até q o campo vazio seja preenchido!! Ex.:

 

 

Para teste, tentei utilizar o cod abaixo:

 

Form exemplo

<form>
   <div id="etapa1">
      <input />
      <input />

      <input type="button" class="btn" value="Próxima Página">

   </div>
   <div id="etapa2">
       <input />
       <input />
       <input type="submit" value="Enviar">

   </div>

</form>

Jquery - Apenas TESTE

$(".btn").click(function(){
   return false;
});

*Tentei utilizar o return false; como teste apenas para travar a etapa atual (ETAPA 1), mas isso n ocorre! Infelizmente o form é passado para etapa 2.

 

Qualquer orientação, help será bem vindo!!! Caso descubra antes posto aqui..

 

Vlws

[Sergio Tomas 16]

Olá Videres, tudo bem? Cara o problema no seu código é o seguinte, quando você está delegando um evento ao botão o javascript irá chamar ele e depois o evento de submit do formulario, por este motivo mesmo você retornando false não irá funcionar, você deve manipular esses dados no evento onSubmit.

 

Para que funcione você deve incluir em seu formulario o seguinte.

<form onSubmit="verificaEtapa(this);">
   <div id="etapa1">
      <input />
      <input />

      <input type="button" class="btn" value="Próxima Página">

   </div>
   <div id="etapa2">
       <input />
       <input />
       <input type="submit" value="Enviar">

   </div>

</form>

<script>
function verificaEtapa(elemento){
     //manipulo o formulario
     alert("posso verificar a etapa agora :) ");

    return false; 
}
</script>

Faça o teste amigo.

[Videres 3]

Opa Sergio, Brigadao por responder!
Acho q entendi o que vc quis dizer, o problema é que seguindo seu codigo acima só terei as validações após a etapa 2 onde localizo o type="submit"...

Meu objetivo seria n deixar o usuário seguir para etapa 2 com campos vazios da etapa 1.. por isso fiz o teste ilustrativo colocando o return false após clicar em:

$(".btn").click(function(){
return false;
});

Posso validar os campos ao clicar em .btn? Posso.. o problema é q mesmo exibindo a mensagem de ERRO ele ainda passa para Etapa 2... T_T

A ideia seria fazer ele travar na etapa em caso de erros... alguma coisa do tipo PARE AQUI vc n fez td corretamente, após clicar em .btn.

No submit tb terei uma validação geral.. mas.. como o form são muitas etapas, o ideal seria corrigir possíveis erro a cada etapa.


Poderia resolver isso com um ninho de cobra.. Alguma coisa do tipo - ao entrar na etapa2 verificar se a etapa 1 esta OK (exemplo) s n voltar p etapa 1.. Mas acredito q haja algum STOP event caso esteja tudo ERRADO! ehhehe

*+1x obrigado pelo Help!

[Sergio Tomas 16]

Olá Videres, poderia mostrar como está o seu código?

[Videres 3]

Opa Sergio,
mals a demora!! Estava trabalhando com um módulo do CMS drupal para realizar esse efeito por etapas.. por isso só te falei a lógica e n deu para mostrar o código.. ainda estava estudando a respeito! hehehe

Consegui resolver o problema e abaixo segue o script utilizado! srsrrs

 

$(document).ready(function() {     
     //Função que captura o acionamento do botao proxima pagina
     Drupal.multipageControl.prototype.nextPage = function() {
          var i = 0;
          var validar = 0;
          
        // Condição especifica para o primeiro grupo das etapas do form
        if (this.wrapper.hasClass('group-dados_pessoais')) {               
               
               //verifico todos os campos input e select do primeiro grupo -> dados_pessoais
               $('.group-dados_pessoais input.required, .group-dados_pessoais select.required').each(function(index) {     
                      
               
                    //Verfiicar se os valores dos campos são Nulos
                    // *N utilizei o plugin "validate" provavelmente seria + pratico.. Ah! "_none" é um valor exibido pelo Drupal caso o select esteja vazio.. por isso utilizei! srrs

if($(this).val() == "" || $(this).val() == "_none"){
                         $(this).addClass("error");     
                         //var validar = 0;
                         validar++;
                         alert("Teste2 -> "+validar)
                         return false;                         
                         
                    }else {
                         $(this).removeClass("error");
                    }                                   
                    
               });                    
               
               // Verifico se ainda possui algum erro.. caso n passo para prox etap
               if (validar == 0) {
                   this.wrapper.next().data('multipageControl').focus();
               }else{
                   //$('html, body').animate({scrollTop:0}, 'slow'); 
               }  
          }               
               
     }   
     
});

 

Isso aew galera! Vlwss \o xD