Field with auto required in java script

Question

Field with auto required in java script

Navigation

#1 by (0 votes)

1

I have my code where I select an item and the field suits each case. When I select number the field returns a given type to be typed and works fine (I got the hint on another question I made by Marcelo Uchimura), however, I now want to know how to make the field be autofocus required with java script I have already tried in some ways and it did not work. In other fields I even have how to do it but following the example of them always gives error. Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="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>

php javascript html5 div twitter-bootstrap

asked by anonymous 03.06.2018 / 18:09

1 answer

What is scoped address zone in IPv6? Create a temporary table or perform a join of 4 tables one with more fields than others

score 0 · Accepted Answer

The required and focus() are working normally in all fields, except in this part below, where you have not set the properties:

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

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

   } else {

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

}

Should be:

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

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

   } else {

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

}

Example:

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><scriptsrc="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>