Validar formulário com tabs

[innovoweb 0]

Salve galera,

Tenho um formulário e estou trabalhando com TABS (Jquery UI)...

Utilizo plugin do Jquery Validation mas preciso validar alguns campos de dentro das abas.

Alguém já trabalhou desta forma? Poderia me dar alguma dica?

Segue abaixo o HTML das abas:

<div class="panel-heading">
    <div class="panel-options">
        <div id="tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-value" class="next-tab" data-toggle="tab">Valores</a></li>
                <li><a href="#tab-stock" class="next-tab" data-toggle="tab">Estoque</a></li>
            </ul>
        </div>
    </div>
    
    <div class="panel-body">   
        <div class="tab-content">
            <div class="tab-pane active" id="tab-value">
                <div class="form-group">
                    <div class="col-md-4">
                        <label class="control-label">R$ Custo</label>
                        <input class="form-control" name="cost_price">
                    </div>

                    <div class="col-md-4">
                        <label class="control-label">R$ Venda</label>
                        <input class="form-control" name="selling_price">
                    </div>
                </div>
            </div>
            
            <div class="tab-pane" id="tab-stock">
                <div class="form-group">
                    <div class="col-md-4">
                        <label class="control-label">Qtd. Estoque Atual</label>
                        <input class="form-control" name="current_stock" class="required">
                    </div>

                    <div class="col-md-4">
                        <label class="control-label">Qtd. Mínima</label>
                        <input class="form-control" name="minimum_stock">
                    </div>
                    
                    <div class="col-md-4">
                        <label class="control-label">Qtd. Perda</label>
                        <input class="form-control" name="loss" value="<?php echo ($action == 'edit') ? $productEdit->loss : NULL; ?>">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[innovoweb 0]

Alguém? rsrsrs

[marcelo.lipienski 1]

Pelo que entendi com a pouca informação que você deu, imagino que a dificuldade seja em inicializar a validação nos elementos dentro da tab que não está ativa quando a página acaba de carregar. Isso acontece quando o javascript tenta adicionar um listener para um elemento que não existe no DOM, ou no seu caso, está com o estilo display: none.

Se for esse o caso, você tem algumas alternativas e aqui vou listar duas:

Usando o próprio jQuery, adicione o listener no elemento pai que você saiba que sempre é renderizado ao final do carregamento

$('.tab-content').on('blur', '[name="loss"]', function() {
  // seu código
});

Usando o window.requestAnimationFrame()

function attachValidations() {
  if (document.getElementById('tab-stock').offsetWidth) {
    // seu código
    return;
  }

  window.requestAnimationFrame(attachValidations);
}

window.requestAnimationFrame(attachValidations);

Em um assunto não relacionado à sua dúvida, fica a dica: não comente em seu tópico só para "upar", é uma prática ruim e vai contra as regras da comunidade. As pessoas que se dispõe a tirar dúvidas também trabalham, estudam e têm família e escolhem ajudar em seu horário de descanso/lazer, então é normal que demore algumas horas, ou até poucos dias para alguém responder sua dúvida.

[innovoweb 0]

Obrigado pela ajuda marcelo.

Não comentei no tópico com o intuito de "upar".

Mas consegui resolver com este código:

var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");
        
        $(panelId).find("input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });
       
        return valid;
    }
});


$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});