0

Como eu poderia enviar um formulário conforme a aba ativa do Bootstrap, ignorando a validação da aba não selecionada?

Exemplo: Possuo uma aba "A" com um formulário "A1" e alguns campos com required, e uma aba "B" com um formulário "B1" com outros campos required.

Ao selecionar a aba "B" e enviar o formulário "B1", não validar os campos do formulário "A1", apenas do formulário "B1", enviando os dados do respectivo formulário.

Tentei de algumas maneiras, porém, ou ele não envia nenhum formulário, ou fica validando o formulário não ativo.

Segue código:

<div class="tab-content">
        <div role='tabpanel' class='tab-pane active' id='produto'>
            <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>">
            <div class="form-group col-md-12">
                <label for="solicitante">Solicitante</label>
                <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>">
            </div>
            <div class="form-group col-md-6">
                <label for="setor">Centro de Custo</label>
                <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
            </div>
            <div class="form-group col-md-6">
                <label for="filial">Filial</label>
                <select class="form-control" name="filial" id="filial" required>
                    <option>Selecione a filial</option>
                    <option value="Componentes">Componentes</option>
                    <option value="Metais">Metais</option>
                    <option value="Sistemas">Sistemas</option>
                </select>               
            </div>
            <div class="form-group col-md-12">
                <label for="descricao_prod">Descrição</label>
                <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea>            
            </div>
            <div class="form-group col-md-6">
                <label for="tipo_prod">Tipo</label>
                <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto">
            </div>
            <div class="form-group col-md-6">
                <label for="finalidade_prod">Finalidade</label>
                <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto">
            </div>
            <div class="row"></div>
            <div class="form-group col-md-6">
                <label for="armazem">Armazém</label>
                <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém">
            </div>
            <div class="form-group col-md-6">
                <label for="ncm">NCM</label>
                <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM">
            </div>
            <div class="form-group col-md-3">
                <label for="mov_estoque">Movimenta estoque?</label>            
                <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label>
                <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label>        
            </div>
            </form>
        </div>
        <div role='tabpanel' class='tab-pane' id='fornecedor'>
            <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>">
            <div class="form-group col-md-12">
                <label for="solicitante">Solicitante</label>
                <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>">
            </div>
            <div class="form-group col-md-6">
                <label for="setor">Centro de Custo</label>
                <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
            </div>
            <div class="form-group col-md-6">
                <label for="filial">Filial</label>
                <select class="form-control" name="filial" id="filial" required>
                    <option>Selecione a filial</option>
                    <option value="Componentes">Componentes</option>
                    <option value="Metais">Metais</option>
                    <option value="Sistemas">Sistemas</option>
                </select>               
            </div>
            <div class="form-group col-md-6">
                <label for="razao_social_forn">Razão Social</label>
                <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="nome_fantasia_forn">Nome Fantasia</label>
                <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="cnpj_forn">CNPJ</label>
                <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="ie_forn">Inscrição Estadual</label>
                <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="tipo_forn">Tipo</label>
                <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor">
            </div>
            <div class='row'></div>
            <div class="form-group col-md-8">
                <label for="endereco_forn">Endereço</label>
                <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="bairro_forn">Bairro</label>
                <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="cidade_forn">Cidade</label>
                <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="estado_forn">Estado</label>
                <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="pais_forn">País</label>
                <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="cep_forn">CEP</label>
                <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="tel_forn">Telefone</label>
                <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="email_forn">E-mail</label>
                <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor">
            </div>  
            </form>
        </div>
    </div>
    <div class="modal-footer col-md-12">        
        <button type="submit" class="btn btn-primary">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
    </div> 
3
  • Poste o que você já tem Thiago. Qual a possibilidade de fazer 2 form ? Commented 25/07/2016 às 15:27
  • Cade o botão de submit ? Commented 25/07/2016 às 15:41
  • Pronto...botão adicionado também ao código acima. Commented 25/07/2016 às 15:44

2 Respostas 2

0

Segue uma solução para seu problema.
Adicionei um pequeno script para saber qual form estamos dando submit.
Poderíamos forçar a submissão via javascript mas isso iria ignorar sua validação via HTML5 Segue o código:

        var submit_master = "produduto";
        $("#nav-produto").click(function(){
            submit_master = "produduto";
        });
        $("#nav-fornecedor").click(function(){
            submit_master = "fornecedor";
        });

        $("#btn-master").click(function(){
            if (submit_master == "produduto") {
                $("#submit-produto").click();
            }else if(submit_master == "fornecedor"){
                $("#submit-fornecedor").click();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#produto" aria-controls="produto" role="tab" data-toggle="tab" id="nav-produto">produto</a></li>
        <li role="presentation"><a href="#fornecedor" aria-controls="fornecedor" role="tab" data-toggle="tab" id="nav-fornecedor">fornecedor</a></li>
    </ul>
    <div class="tab-content">
        <div role='tabpanel' class='tab-pane active' id='produto'>
            <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_solicitacao" value="">
                <div class="form-group col-md-12">
                    <label for="solicitante">Solicitante</label>
                    <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true">
                </div>
                <div class="form-group col-md-6">
                    <label for="setor">Centro de Custo</label>
                    <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
                </div>
                <div class="form-group col-md-6">
                    <label for="filial">Filial</label>
                    <select class="form-control" name="filial" id="filial" required>
                        <option>Selecione a filial</option>
                        <option value="Componentes">Componentes</option>
                        <option value="Metais">Metais</option>
                        <option value="Sistemas">Sistemas</option>
                    </select>               
                </div>
                <div class="form-group col-md-12">
                    <label for="descricao_prod">Descrição</label>
                    <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea>
                </div>
                <div class="form-group col-md-6">
                    <label for="tipo_prod">Tipo</label>
                    <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto">
                </div>
                <div class="form-group col-md-6">
                    <label for="finalidade_prod">Finalidade</label>
                    <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto">
                </div>
                <div class="row"></div>
                <div class="form-group col-md-6">
                    <label for="armazem">Armazém</label>
                    <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém">
                </div>
                <div class="form-group col-md-6">
                    <label for="ncm">NCM</label>
                    <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM">
                </div>
                <div class="form-group col-md-3">
                    <label for="mov_estoque">Movimenta estoque?</label>            
                    <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label>
                    <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label>        
                </div>
                <button id="submit-produto" class="hidden">ok</button>
            </form>
        </div>
        <div role='tabpanel' class='tab-pane' id='fornecedor'>
            <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_solicitacao" value="">
                <div class="form-group col-md-12">
                    <label for="solicitante">Solicitante</label>
                </div>
                <div class="form-group col-md-6">
                    <label for="setor">Centro de Custo</label>
                    <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
                </div>
                <div class="form-group col-md-6">
                    <label for="filial">Filial</label>
                    <select class="form-control" name="filial" id="filial" required>
                        <option>Selecione a filial</option>
                        <option value="Componentes">Componentes</option>
                        <option value="Metais">Metais</option>
                        <option value="Sistemas">Sistemas</option>
                    </select>               
                </div>
                <div class="form-group col-md-6">
                    <label for="razao_social_forn">Razão Social</label>
                    <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="nome_fantasia_forn">Nome Fantasia</label>
                    <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="cnpj_forn">CNPJ</label>
                    <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="ie_forn">Inscrição Estadual</label>
                    <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="tipo_forn">Tipo</label>
                    <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor">
                </div>
                <div class='row'></div>
                <div class="form-group col-md-8">
                    <label for="endereco_forn">Endereço</label>
                    <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="bairro_forn">Bairro</label>
                    <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="cidade_forn">Cidade</label>
                    <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="estado_forn">Estado</label>
                    <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="pais_forn">País</label>
                    <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="cep_forn">CEP</label>
                    <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="tel_forn">Telefone</label>
                    <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="email_forn">E-mail</label>
                    <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor">
                </div> 
                <button id="submit-fornecedor" class="hidden"></button>
            </form>
        </div>
    </div>
    <div class="modal-footer col-md-12">        
        <button type="submit" class="btn btn-primary" id="btn-master">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
    </div>

Eu testei aqui e funcionou ok.
Qualquer dúvida da um toque aqui.
Só pra lembrar que se você colocar um button pra cada form já resolve o problema.
Espero ter ajudado.

0

Quando a aba está selecionada ela contem o tab-pane active ao invés de somente tab-pane. Portanto basta fazer isso:

$('button[type="submit"]').on('click', function(){

    var modo = 'cad_'+$('.tab-content').find('.active').attr('id');
    $('form[name="'+modo+'"]').submit();

});

Nesse caso quando clicar no botão ele irá obter o id do elemento que contem o active. O id será produto, por exemplo.

Porém o formulário contem o prefixo cad_ no valor do name. Portanto a variável modo insere o cad_, tornando em cad_produto, por exemplo, então irá enviar o formulário usando o .submit().

Demonstração:

Foi inserido um alert() para melhor visualização!

$('button[type="submit"]').on('click', function(){

    var modo = 'cad_'+$('.tab-content').find('.active').attr('id');
    alert('Você enviou o formulário de ' + modo) 
    $('form[name="'+modo+'"]').submit();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav nav-tabs">
        <li class="col-xs-6 active"><a href="#produto" data-toggle="tab">Produto</a></li>
        <li class="col-xs-6"><a href="#fornecedor" data-toggle="tab">Fornecedor</a></li>
</ul>
          
<!-- SEU HTML : INALTERADO! -->
<div class="tab-content"> <div role='tabpanel' class='tab-pane active' id='produto'> <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>"> <div class="form-group col-md-12"> <label for="solicitante">Solicitante</label> <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>"> </div><div class="form-group col-md-6"> <label for="setor">Centro de Custo</label> <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante"> </div><div class="form-group col-md-6"> <label for="filial">Filial</label> <select class="form-control" name="filial" id="filial" required> <option>Selecione a filial</option> <option value="Componentes">Componentes</option> <option value="Metais">Metais</option> <option value="Sistemas">Sistemas</option> </select> </div><div class="form-group col-md-12"> <label for="descricao_prod">Descrição</label> <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea> </div><div class="form-group col-md-6"> <label for="tipo_prod">Tipo</label> <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto"> </div><div class="form-group col-md-6"> <label for="finalidade_prod">Finalidade</label> <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto"> </div><div class="row"></div><div class="form-group col-md-6"> <label for="armazem">Armazém</label> <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém"> </div><div class="form-group col-md-6"> <label for="ncm">NCM</label> <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM"> </div><div class="form-group col-md-3"> <label for="mov_estoque">Movimenta estoque?</label> <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label> <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label> </div></form> </div><div role='tabpanel' class='tab-pane' id='fornecedor'> <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>"> <div class="form-group col-md-12"> <label for="solicitante">Solicitante</label> <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>"> </div><div class="form-group col-md-6"> <label for="setor">Centro de Custo</label> <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante"> </div><div class="form-group col-md-6"> <label for="filial">Filial</label> <select class="form-control" name="filial" id="filial" required> <option>Selecione a filial</option> <option value="Componentes">Componentes</option> <option value="Metais">Metais</option> <option value="Sistemas">Sistemas</option> </select> </div><div class="form-group col-md-6"> <label for="razao_social_forn">Razão Social</label> <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor"> </div><div class="form-group col-md-6"> <label for="nome_fantasia_forn">Nome Fantasia</label> <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor"> </div><div class="form-group col-md-6"> <label for="cnpj_forn">CNPJ</label> <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor"> </div><div class="form-group col-md-6"> <label for="ie_forn">Inscrição Estadual</label> <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor"> </div><div class="form-group col-md-4"> <label for="tipo_forn">Tipo</label> <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor"> </div><div class='row'></div><div class="form-group col-md-8"> <label for="endereco_forn">Endereço</label> <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor"> </div><div class="form-group col-md-4"> <label for="bairro_forn">Bairro</label> <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor"> </div><div class="form-group col-md-4"> <label for="cidade_forn">Cidade</label> <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor"> </div><div class="form-group col-md-4"> <label for="estado_forn">Estado</label> <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor"> </div><div class="form-group col-md-4"> <label for="pais_forn">País</label> <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor"> </div><div class="form-group col-md-4"> <label for="cep_forn">CEP</label> <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor"> </div><div class="form-group col-md-4"> <label for="tel_forn">Telefone</label> <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor"> </div><div class="form-group col-md-4"> <label for="email_forn">E-mail</label> <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor"> </div></form> </div></div><div class="modal-footer col-md-12"> <button type="submit" class="btn btn-primary">Salvar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .