Validação de formulários em abas.

[Bruno M Duarte 0]

Bom dia pessoal?

 

A dúvida que eu tenho é o seguinte!

 

Eu estou implementando um formulário utilizando o Framework Bootstrap. E nesse formulário tem um menu com abas(Tab) que estão dividindo os campos respectivos para cada aba.

A minha dificuldade é que com o plugin do jQuery o 'Validate' eu não estou conseguindo fazer a validação nessessária dos campos que estão na outra aba. Ele so faz a validação somente na aba em que esta setada/selecionada e eu gostaria que ao submiter o formulário, todos os campos que foram descritos na função de validação(Validate), fossem validados.

 

Código HTML:

<ul class="nav nav-tabs" role="tablist">
     <li class="active"><a href="#dadosgerais" id="aba-dadosgerais" role="tab" data-toggle="tab">Dados Gerais</a></li>
     <li               ><a href="#valores"     id="aba-valores"     role="tab" data-toggle="tab">Valores</a></li>
     <li               ><a href="#produtos"    id="aba-produtos"    role="tab" data-toggle="tab">Produtos</a></li>
</ul>
                    
<div class="tab-content">
       <div class="tab-pane fade active in" id="dadosgerais" role="tabpanel">
              <div class="row">
                     <div class="col-lg-6"><br>
                            <fieldset>
                                  <legend>Dados do Pedido</legend>
                                  <div class="form-group">
                                       <label for="nome_1" class="required">Nome 1</label>
                                       <input type="text" class="form-control" id="nome_1" name="nome_1" value="" autocomplete="off" />
                                  </div>           
                            </fieldset>
                      </div>                      
               </div>
        </div> 
         <div class="tab-pane fade" id="valores"  role="tabpanel">
                <div class="row">
                      <div class="col-lg-6"><br>
                             <fieldset>
                                   <legend>Valores</legend>
                                   <div class="form-group">
                                         <label for="nome_2" class="required">Nome 2</label>
                                         <input type="text" class="form-control" id="nome_2" name="nome_2" value="" autocomplete="off" />
                                   </div>
                             </fieldset>                        
                       </div> 
                 </div>
          </div>
          <div class="tab-pane fade" id="produtos"  role="tabpanel">
                 <div class="row">
                       <div class="col-lg-12"><br>
                              <fieldset>
                                        <legend>Itens do Pedido</legend>
                                        <div class="form-group">
                                            <label for="nome_3" class="required">Nome 3</label>
                                            <input type="text" class="form-control" id="nome_3" name="nome_3" value="" autocomplete="off" />
                                        </div>
                               </fieldset>                        
                       </div>    
                 </div> 
           </div>
</div> 

Código jQuery:

$('#frmDados').validate({
            rules: {
                nome_1   : { required: true },
                nome_2   : { required: true },
                nome_3   : { required: true }               
            },
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function(error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

Creio que fui claro.

Se alguém puder me ajudar desde já eu agradeço.

Forte abraço a todos.

Feliz Natal! :natalbiggrin:

[ldblucas 0]

nenhuma solução ?