2

Tenho as seguintes dúvidas: 1- No meu código tem duas opções (CPF/CNPJ) e as opções só aparecem quando se clica em um dos dois, gostaria de saber como posso fazer para que a opção cpf em primeiro momento apareça ativa? 2-Como posso colocar "required" e "autofocus" nos campos somente quando estes estiverem ativo e quando ocultos não tenha esses recursos? Agradeço quem puder ajudar. Segue meu código:

$('#radioBtn a').on('click', function() {
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#' + tog).prop('value', sel);

  $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
})

jQuery(document).ready(function() {
  $("#info2").hide();
  $(".inf").click(function() {
    var nodo = $(this).attr("href");

    if ($(nodo).is(":visible")) {
  //$(nodo).hide();
  return false;
} else {
  $(".oculto").hide("slow").find(':input').prop('disabled', true);
  $(nodo).fadeToggle("fast").find(':input').prop('disabled', false);
  return false;
}
  });
});
//CAMPO CPF
function inpMask(){
var phones = [{ "mask": "###.###.###-##"}];
$('#cpf').inputmask({ 
mask: phones, 
greedy: false, 
definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
}
										
$(window).load(inpMask);
										
$(document).on("click", ":submit", function(){
var cpf = $("#cpf");
if($(cpf).is(":visible") && $(cpf, "form").val() == ""){	$(cpf).inputmask('remove');
}
											
$(cpf).keyup(inpMask);
});
//FIM CAMPO CPF
                    
//CAMPO CNPJ
function inpMask(){
var phones = [{ "mask": "##.###.###/####-##"}];
$('#cnpj').inputmask({ 
mask: phones, 
greedy: false, 
definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
}
					
$(window).load(inpMask);
					
$(document).on("click", ":submit", function(){
var cnpj = $("#cnpj");
if($(cnpj).is(":visible") && $(cnpj, "form").val() == ""){
$(cnpj).inputmask('remove');
}
						
$(cnpj).keyup(inpMask);
});
//FIM CAMPO CNPJ
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<!--TIPO DE CLIENTE-->
<h4><b>Tipo de Cliente:<h4>
   <div class="row">
      <div class="col-md-4" >
         <div class="input-group">
            <div id="radioBtn" class="btn-group">
               <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
               <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
            </div>
         </div>
      </div>
   </div>
<!--FIM TIPO DE CLIENTE-->

<!-- COLUNA CPF-->
<div class="row oculto" id="info1">					
   <!--Campo Nome-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="nome">Nome:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
            </div>
            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo Nome-->
						
   <!--Campo CPF-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="cpf">CPF:</label>
         <div class="input-group">
            <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CPF-->
						
</div>
<!--FIM COLUNA CPF-->	
					
<!-- COLUNA CNPJ-->
<div class="row oculto" id="info2">					
   <!--Campo RAZAO_SOCIAL-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Razão Social:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo RAZAO_SOCIAL-->
						
   <!--Campo NOME_FANTASIA-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Nome Fantasia:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo NOME_FANTASIA-->
						 
   <!--Campo CNPJ-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">CNPJ:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

2 Respostas 2

1

Para não esconder a aba do CPF quando a página é carregada basta... Não esconde-la.

Você está fazendo isso manualmente com o código $(".oculto").hide(), utilize $("#info2").hide() para esconder apenas o CNPJ.


Agora quanto a remover a propriedade required, eu recomendaria você ao invés de fazer isso, adicionar a propriedade disabled. Dessa forma o input não será requerido, e nem será enviado, são dois coelhos numa cajadada.

Ficaria assim:

if ($(nodo).is(":visible")) {
  //$(nodo).hide();
  return false;
} else {
  $(".oculto").hide("slow").find(':input').prop('disabled', true);
  $(nodo).fadeToggle("fast").find(':input').prop('disabled', false);
  return false;
}

Claro, você também pode usar essa mesma lógica para ativar e desativar a propriedade required se preferir.

2
  • Perfeito! Muito obrigado. Eu tenho uma outra dúvida. Vou editar a pergunta pra vc entender.
    – Carlos
    18/03/2019 às 14:41
  • Como posso fazer para quando esse elemento estiver desabilitado também possa ser limpo caso exista algo escrito anteriormente?
    – Carlos
    19/03/2019 às 13:28
0

Você pode usar apenas um evento para fazer tudo. Coloque no CSS a classe:

<style>
.oculto{
   display: none;
}
</style>

E na div#infos2 insira a classe .oculto para que ela seja oculta de início. Coloque também nas duas divs (#info1 e #info2) uma classe para manipular no jQuery (coloquei a classe .infos):

<div class="row infos" id="info1">

e

<div class="row infos oculto" id="info2">

Note que na #info2 possui a classe .oculto.

Agora é só ocultar um quando o outro estiver visível e vice-versa, e remover o atributo required dos inputs da div oculta e adicionar nos inputs da div visível, e usar o método .focus() para focar no primeiro input da div visível:

jQuery(document).ready(function() {
   $('#radioBtn a').on('click', function() {
      var sel = $(this).data('title');
      var tog = $(this).data('toggle');
      $('#' + tog).prop('value', sel);
      
      $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
      $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
   
      var id = $(this).attr("href");
      $("div.infos:visible")
      .hide("slow")
      .find("input")
      .prop("required", false);
   
      $(id)
      .show("fast", function(){
         $(this)
         .find("input")
         .prop("required", true);
   
         $(this)
         .find("input:first")
         .focus();
      });
   });
});
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}

.oculto{
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--TIPO DE CLIENTE-->
<h4><b>Tipo de Cliente:<h4>
   <div class="row">
      <div class="col-md-4" >
         <div class="input-group">
            <div id="radioBtn" class="btn-group">
               <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
               <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
            </div>
         </div>
      </div>
   </div>
<!--FIM TIPO DE CLIENTE-->

<!-- COLUNA CPF-->
<div class="row infos" id="info1">					
   <!--Campo Nome-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="nome">Nome:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
            </div>
            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo Nome-->
						
   <!--Campo CPF-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="cpf">CPF:</label>
         <div class="input-group">
            <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CPF-->
						
</div>
<!--FIM COLUNA CPF-->	
					
<!-- COLUNA CNPJ-->
<div class="row infos oculto" id="info2">					
   <!--Campo RAZAO_SOCIAL-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Razão Social:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo RAZAO_SOCIAL-->
						
   <!--Campo NOME_FANTASIA-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Nome Fantasia:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo NOME_FANTASIA-->
						 
   <!--Campo CNPJ-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">CNPJ:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

1
  • Mto obrigado pela resposta amigo. Mto saber que existem várias formas de fazer a mesma coisa.
    – Carlos
    19/03/2019 às 14:05

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 .