Field with auto required in java script

Asked

Viewed 77 times

1

I have my code where I select an item and the field fits each case. When number is selected the field returns a type given to be typed and works well (I received the hint in another question I asked by Marcelo Uchimura), however, now I want to know how to make the field be autofocus required with java script already tried in some ways and did not work. In other fields I can do but following their example always gives error. Follows my code:

<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>

php javascript html5 twitter-bootstrap div

  • Let’s solve this here rs :D...

  • I’m here to learn! Hehehehehe

  • Way to go, baby!

  • I go as far as my knowledge goes. When I can’t get out of place I lap here, but I’ve managed to do enough.

1 answer

0


The required and the focus() are functioning normally in all fields except 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>
<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>

  • This worked well friend, but, it does not appear a Html5 message asking for something to be typed as in other fields. In fact that aspect is just wanting my Rsrsrsrs, but if you can help me see how to do it I would be grateful.

  • What would be the difference?

  • Thanks for the explanation.

  • I actually checked that the message does not appear pq in another part of the code I have a javascript that includes the format (__) - and with that the field understands that it is busy but without any data. The question is how can I do so that this format is not taken into account.

  • $(window). load(Function(){ var phones = [{ "Mask": "(##) ############"}]; $('.numero').inputmask({ Mask: phones, Greedy: false, Definitions: { '#': { Validator: "[0-9]", cardinality: 1}} }); });

  • That part right there is the one you helped me with.

  • Okay, I’ve created a function that applies the mask and some events to control. Note that you do not need to separate the codes, you can leave everything in a block only of <script> after the form.

  • Damn! Perfect friend! Thank you!

Show 3 more comments

Browser other questions tagged php javascript html5 twitter-bootstrap div

You are not signed in. Login or sign up in order to post.