Validação de formulários em abas.

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: