1

Tenho meu código onde seleciono um item e o campo se adequa a cada caso. Quando é selecionado número o campo retorna um tipo dado a ser digitado e funciona bem (recebi a dica em outra pergunta que fiz por Marcelo Uchimura), porém, agora quero saber como fazer o campo ser autofocus required com java script já tentei de algumas formas e não deu certo. Em outros campos até tenho como fazer mas seguindo o exemplo deles sempre dá erro. Segue meu código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<!--Script que esconde e mostra Divs-->
        <script>
           $(document).ready(function(){
   $("#tipo").change(function(){
      var filtro = $('#filtro');
      var seletor = $('#seletor');
      
      if( !$(this).val() || $(this).val().match(/^(contrato|cliente|cpf|solicitante)$/) )
         filtro
         .show()
         .attr('required', true)
         .focus();
      else
         filtro
         .hide()
         .attr('required', false);
		 
	  if ($(this).val().match(/^numero$/)) {

        $('#numero2').show();

       } else {

        $('#numero2').hide();

       }	 

      if( $(this).val() == "situacao")
         seletor
         .show()
         .attr('required', true)
         .focus();
      else
         seletor
         .hide()
         .attr('required', false); 

   });
});
        </script>
        <!--Fim Script que esconde e mostra Divs-->

        <!--Campo Filtrar-->
        <form method="get" action="pesquisas.php">
            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group col-lg-12">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <select required autofocus class="form-control" name="tipo" id="tipo">
                            <option value="">SELECIONAR</option>
                            <option value="situacao">SITUAÇÃO</option>
                            <option value="contrato">CONTRATO</option>
                            <option value="cliente">CLIENTE</option>
                            <option value="cpf">CPF</option>
                            <option value="numero">NÚMERO</option>
                            <option value="solicitante">SOLICITANTE</option>
                        </select></form></div></div>
<!--Fim Campo Filtrar-->

<!--Campo Situaçao-->
<div class="col-sm-2 col-lg-4" >
    <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
        <option value="">SELECIONAR</option>
        <option value="solicitada">SOLICITADA</option>
        <option value="portada">PORTADA</option>
        <option value="cancelada">CANCELADA</option>
        <option value="erro">ERRO</option>
    </select>
</div>
<!--Fim Campo Situaçao-->

<div class="col-sm-21 col-lg-4">
<input type="text" id="numero2" name="numero2" class="form-control" style="display: none" maxlength="15" placeholder="(00) 0000-0000">

<script>
$(window).load(function()
{
   var phones = [{ "mask": "(##) ####-####"}];
    $('#numero2').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});
</script>
</div>

<!--Fim Campo Filtrar-->
<div class="col-sm-2 col-lg-4" >
    <input type="text" class="form-control" name="filtro" id="filtro"></div>
<!--Fim Campo de pesquisa escrita-->

<input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>

</form>
</div>

4
  • Bora resolver esta aqui rs :D...
    – Meu ovo
    3/06/2018 às 21:13
  • Tô aqui pra aprender! Hehehehehe
    – Carlos
    3/06/2018 às 21:17
  • Isso aí, bacana!
    – Meu ovo
    3/06/2018 às 21:18
  • Eu vou até onde meu conhecimento vai. Quando eu não consigo sair do lugar colo aqui, mas, já consegui fazer bastante coisa.
    – Carlos
    3/06/2018 às 21:27

1 Resposta 1

0

Os required e os focus() estão funcionando normalmente em todos os campos, exceto nesta parte abaixo, onde você não setou as propriedades:

if ($(this).val().match(/^numero$/)) {

    $('#numero2').show();

   } else {

    $('#numero2').hide();

}    

Deveria ser:

if ($(this).val().match(/^numero$/)) {

    $('#numero2').show()
     .attr('required', true)
     .focus();

   } else {

    $('#numero2').hide()
     .attr('required', false);

}    

Exemplo:

function inpMask(){
   var phones = [{ "mask": "(##) ####-####"}];
    $('#numero2').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
}

$(window).load(inpMask);

$(document).on("click", ":submit", function(){
   var numero2 = $("#numero2");
   if($(numero2).is(":visible") && $(numero2, "form").val() == ""){
     $(numero2).inputmask('remove');
   }
   
   $(numero2).keyup(inpMask);
});

$(document).ready(function(){
   $("#tipo").change(function(){
      var filtro = $('#filtro');
      var seletor = $('#seletor');
      
      if( !$(this).val() || $(this).val().match(/^(contrato|cliente|cpf|solicitante)$/) )
         filtro
         .show()
         .attr('required', true)
         .focus();
      else
         filtro
         .hide()
         .attr('required', false);
		 
	  if ($(this).val().match(/^numero$/)) {

        $('#numero2').show()
         .attr('required', true)
         .focus();

       } else {

        $('#numero2').hide()
         .attr('required', false);
         inpMask();

       }	 

      if( $(this).val() == "situacao")
         seletor
         .show()
         .attr('required', true)
         .focus();
      else
         seletor
         .hide()
         .attr('required', false); 

   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<form method="get" action="pesquisas.php">
            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group col-lg-12">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <select required autofocus class="form-control" name="tipo" id="tipo">
                            <option value="">SELECIONAR</option>
                            <option value="situacao">SITUAÇÃO</option>
                            <option value="contrato">CONTRATO</option>
                            <option value="cliente">CLIENTE</option>
                            <option value="cpf">CPF</option>
                            <option value="numero">NÚMERO</option>
                            <option value="solicitante">SOLICITANTE</option>
                        </select></form></div></div>
<!--Fim Campo Filtrar-->

<!--Campo Situaçao-->
<div class="col-sm-2 col-lg-4" >
    <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
        <option value="">SELECIONAR</option>
        <option value="solicitada">SOLICITADA</option>
        <option value="portada">PORTADA</option>
        <option value="cancelada">CANCELADA</option>
        <option value="erro">ERRO</option>
    </select>
</div>
<!--Fim Campo Situaçao-->

<div class="col-sm-21 col-lg-4">
<input type="text" id="numero2" name="numero2" class="form-control" style="display: none" maxlength="15" placeholder="(00) 0000-0000"><!--Fim Campo Filtrar-->
<div class="col-sm-2 col-lg-4" >
    <input type="text" class="form-control" name="filtro" id="filtro"></div>
<!--Fim Campo de pesquisa escrita-->

<input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>

</form>
</div>

8
  • Assim deu certo amigo, mas, não aparece uma mensagem do html5 pedindo que algo seja digitado como nos outros campos. De fato esse aspecto é só querer meu Rsrsrsrsrs, mas se puder me ajudar a ver como se faz isso ficarei agradecido.
    – Carlos
    4/06/2018 às 18:03
  • Qual seria a diferença?
    – Carlos
    4/06/2018 às 20:33
  • Obrigado pela explicação.
    – Carlos
    4/06/2018 às 21:16
  • Na realidade verifiquei que não aparece a mensagem pq em outra parte do código tenho um javascript que inclui o formato (__) ____-____ e com isso o campo entende que está ocupado porém sem nenhum dado. A pergunta é como posso fazer para que esse formato não seja levado em consideração.
    – Carlos
    4/06/2018 às 21:28
  • $(window).load(function(){ var phones = [{ "mask": "(##) ####-####"}]; $('.numero').inputmask({ mask: phones, greedy: false, definitions: { '#': { validator: "[0-9]", cardinality: 1}} }); });
    – Carlos
    4/06/2018 às 21:28

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 .