0

Implementei a rotina para verificação se ao pressionar uma tecla no campo INPUT é digitado somente digitos. No primeiro campo funciona normalmente, mas ao adicionar o segundo campo não funciona mais. Alguém sabe qual o problema?

$(document).ready(function () {
  var bloco = $('[class^="bloco_"]');
  var current_id = parseInt(bloco.attr("class").split("_")[1], 10);
  
  $('input').bind('keypress', function (e) {
    // if the letter is not digit then display error and don't type anything
    if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
      //display error message
      $('.errmsg').css('color', 'red');
      $('.errmsg').html('Digits Only').show().fadeOut('slow');
      return false;
    }
  }).unbind('keypress').bind('keypress', function (e) {
    // if the letter is not digit then display error and don't type anything
    if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
      //display error message
      $('.errmsg').css('color', 'red');
      $('.errmsg').html('Digits Only').show().fadeOut('slow');
      return false;
    }            
  });

  $(document).on('click', '.btn-add', function (e) {
    e.preventDefault();
    var div_elements  = $('form:first .elements');            // SELECIONA DIV ELEMENTS   
    var div_bloco     = div_elements.find('.bloco_01:first'); // SELECIONA 1o BLOCO
    var last_class_number = parseInt(div_elements.find('div[class^=bloco_]:last').attr("class").split("_")[1], 10); // PEGA NUM DO ULTIMO BLOCO           
    
    nextElement(div_bloco, last_class_number);     
    div_elements.find('div[class^=bloco_]:last span')
    .removeClass('glyphicon-plus')
    .addClass('glyphicon-minus')
    .parent('button.btn-add')
    .removeClass('btn-add')
    .addClass('btn-del');    
    
    $('div[class^=bloco_]:last input').val('');

    $(this).unbind('click').on('click', '.btn-add', function(e) {
      div_elements.find('div[class^=bloco_]:last span')
      .removeClass('glyphicon-plus')
      .addClass('glyphicon-minus')
      .parent('button.btn-add')
      .removeClass('btn-add')
      .addClass('btn-del');                    

      $('div[class^=bloco_]:last input').val('');
    });
  
  }).on('click', '.btn-del', function (e) {
    e.preventDefault();            
    var bloco = $(this).parent().parent().parent().parent().attr('class');                        
    $('.' + bloco).remove();

    $(this).unbind('click').on('click', '.btn-del', function(e) {
      $('.' + bloco).remove();
    });
  });        

  function nextElement(element, current_id) {
    var newElement = element.clone();
    var id = current_id + 1;

    current_id = id;

    if (id < 10)
      id = "0" + id;

    var div_class_bloco = element.attr("class");

    newElement.attr("class", div_class_bloco.split("_")[0] + "_" + id);
    newElement.appendTo($(".elements"));
  }  

}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-12">
    <form id="certameForm" class="form-horizontal" method="POST" action="teste_etapa11.php">
      <div class="elements">
        <div class="bloco_01">
          <!-- Secretaria -->
          <div class="form-group">
            <div class="col-sm-11 inputGroupContainer">
              <label class="col-sm-2 control-label">Secretaria</label>
              <div class="col-sm-9">
                <select class="form-control" id="cd_secretaria[]" name="cd_secretaria[]">
                  <option value="0">--Selecione a Secretaria--</option>
                  <option value="1">Administracao</option>
                  <option value="2">Assuntos Juridicos</option>
                  <option value="3">Chefia de Gabinete do Prefeito</option>
                  <option value="4">Cidadania, Assistencia e Inclusao Social</option>
                  <option value="5">Comunicacao</option>
                  <option value="6">Cooperacao Internacional</option>
                </select>
              </div>
              <div class="col-sm-1">
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-11 inputGroupContainer">
              <label for="nu_qtd_vagas_por_secretaria[]" class="col-sm-2 control-label">Qtde Vagas por Secretaria</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="nu_qtd_vagas_por_secretaria[]" name="nu_qtd_vagas_por_secretaria[]" placeholder="Quantidade de vagas por Secretaria" size="2" maxlength="2">
                <span class="errmsg"></span>
              </div>
            </div>
          </div>
          <!-- plus -->
          <div class="form-group">
            <div class="col-sm-11 inputGroupContainer">
              <div class="col-sm-offset-10 col-sm-1">
                <button class="btn btn-primary btn-md btn-add">
                  <span class="glyphicon glyphicon-plus"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Accept box and button submit -->
      <div class="form-group">
        <div class="col-sm-11 inputGroupContainer">
          <div class="col-sm-offset-3 col-sm-8">        
            <ul class="list-unstyled pull-right">
              <li><button type="submit" class="btn btn-primary next-step" id="submitted" name="submitted">Salvar e Continuar</button></li>
            </ul>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Segue fiddle: https://jsfiddle.net/rbastida/bk1kxztr/4/

1
  • no fiddle adicionar campo não está funcionando!
    – user60252
    Commented 24/08/2017 às 15:14

3 Respostas 3

1

Você pode utilizar type="number" ou fazer uma validação do que é digitado com javascript.

$("input.inteiro").keyup(function (e) { // Filtro o que não é digito
    if (/\D/g.test($(this).val())) $(this).val($(this).val().replace(/\D/g, ''));
});
$("input.numerico").keyup(function (e) { // Filtro o que não é numérico
    var tVal=$(this).val();
    if (tVal!="" && isNaN(tVal)){
        tVal=(tVal.substr(0,1).replace(/[^0-9\.\-]/, '')+tVal.substr(1).replace(/[^0-9\.]/, ''));
        var raVal=tVal.split(".")
        if(raVal.length>2)
            tVal=raVal[0]+"."+raVal.slice(1).join("");
        $(this).val(tVal);
    } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Campos numéricos utilizando somente html:</p>
  <input type="number" />
</div>
<div>
  <p>Somente inteiros utilizando expressão regular com replace:</p>
  <input type="text" class="inteiro" />
</div>
<div>
  <p>Somente numéricos utilizando expressão regular com replace:</p>
  <input type="text" class="numerico" />
</div>

0

Use o .delegate(). Ele irá incluir novos elementos à função.

Substitua a linha

$('input').bind('keypress', function (e) {

por

$(document).delegate('input','keypress', function (e) {

Embora o método .delegate() esteja marcado como "descontinuado" nos docs do jQuery, ele ainda funciona em sua última versão.

Atualizando:

Como o .delegate() e o .bind() foi descontinuado, em substituição é recomendado usar .on(). Neste caso, o correto é vc selecionar apenas o conjunto de elementos ao qual vc quer aplicar a função. Em vez de selecionar o documento todo $(document), selecione apenas o form em questão:

$("#certameForm").on('keypress', 'input', function (e) {

0

Modifique a seguinte linha:

$('input').bind('keypress', function (e) {

Para:

$(document).on('keypress', 'input', function (e) {

Fazendo isso, a função que verifica se foi digitado somente dígitos e exibe a mensagem de erro funcionará também para os novos elementos criados dinamicamente na página.

Além da modificação citada acima, removi uma parte da função que verifica se foi digitado somente dígitos e exibe a mensagem de erro, pois a mesma estava duplicada no código original.

Antes:

  $('input').bind('keypress', function (e) {
    // if the letter is not digit then display error and don't type anything
    if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
      //display error message
      $('.errmsg').css('color', 'red');
      $('.errmsg').html('Digits Only').show().fadeOut('slow');
      return false;
    }
  }).unbind('keypress').bind('keypress', function (e) {
    // if the letter is not digit then display error and don't type anything
    if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
      //display error message
      $('.errmsg').css('color', 'red');
      $('.errmsg').html('Digits Only').show().fadeOut('slow');
      return false;
    }            
  });

Depois:

  $(document).on('keypress', 'input', function (e) {

        //   if the letter is not digit then display error and don't type anything
        if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
            //display error message
            $('.errmsg').css('color', 'red');
            $(this).closest('div').find('.errmsg').html('Digits Only').show().fadeOut('slow');
            return false;
        }

    });

Segue demonstração do funcionamento do seu código após as alterações:

$(document).ready(function () {

    var bloco = $('[class^="bloco_"]');
    var current_id = parseInt(bloco.attr("class").split("_")[1], 10);

    $(document).on('keypress', 'input', function (e) {
        //   if the letter is not digit then display error and don't type anything
        if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
            //display error message
            $('.errmsg').css('color', 'red');
            //Busca o elemento com class .errmsg que esteja na mesma div do input alterado e exibe a mensagem de alerta
            $(this).closest('div').find('.errmsg').html('Digits Only').show().fadeOut('slow');
            return false;
        }
    });

    $(document).on('click', '.btn-add', function (e) {

        e.preventDefault();

        var div_elements  = $('form:first .elements');            // SELECIONA DIV ELEMENTS   
        var div_bloco     = div_elements.find('.bloco_01:first'); // SELECIONA 1o BLOCO
        var last_class_number = parseInt(div_elements.find('div[class^=bloco_]:last').attr("class").split("_")[1], 10); // PEGA NUM DO ULTIMO BLOCO           

        nextElement(div_bloco, last_class_number);     

        div_elements.find('div[class^=bloco_]:last span')
            .removeClass('glyphicon-plus')
            .addClass('glyphicon-minus')
            .parent('button.btn-add')
            .removeClass('btn-add')
            .addClass('btn-del');    

        $('div[class^=bloco_]:last input').val('');

        $(this).unbind('click').on('click', '.btn-add', function(e) {

            div_elements.find('div[class^=bloco_]:last span')
                .removeClass('glyphicon-plus')
                .addClass('glyphicon-minus')
                .parent('button.btn-add')
                .removeClass('btn-add')
                .addClass('btn-del');                    

            $('div[class^=bloco_]:last input').val('');

        });        

    }).on('click', '.btn-del', function (e) {

        e.preventDefault();            
        var bloco = $(this).parent().parent().parent().parent().attr('class');                        
        $('.' + bloco).remove();

        $(this).unbind('click').on('click', '.btn-del', function(e) {

            $('.' + bloco).remove();

        });

    });        

    function nextElement(element, current_id) {

        var newElement = element.clone();
        var id = current_id + 1;

        current_id = id;

        if (id < 10)
            id = "0" + id;

        var div_class_bloco = element.attr("class");

        newElement.attr("class", div_class_bloco.split("_")[0] + "_" + id);
        newElement.appendTo($(".elements"));

    }  

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">    
    <div class="col-sm-12">

        <form id="certameForm" class="form-horizontal" method="POST" action="teste_etapa11.php">
            <div class="elements">
                <div class="bloco_01">

                    <!-- Secretaria -->
                    <div class="form-group">
                        <div class="col-sm-11 inputGroupContainer">
                            <label class="col-sm-2 control-label">Secretaria</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="cd_secretaria[]" name="cd_secretaria[]">
                                    <option value="0">--Selecione a Secretaria--</option>  
                                    <option value="1">Administracao</option>
                                    <option value="2">Assuntos Juridicos</option>
                                    <option value="3">Chefia de Gabinete do Prefeito</option>
                                    <option value="4">Cidadania, Assistencia e Inclusao Social</option>
                                    <option value="5">Comunicacao</option>
                                    <option value="6">Cooperacao Internacional</option>                                        
                                </select>
                            </div>
                            <div class="col-sm-1">
                            </div>
                        </div>
                    </div>  

                    <div class="form-group">
                        <div class="col-sm-11 inputGroupContainer">        
                            <label for="nu_qtd_vagas_por_secretaria[]" class="col-sm-2 control-label">Qtde Vagas por Secretaria</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="nu_qtd_vagas_por_secretaria[]" name="nu_qtd_vagas_por_secretaria[]" placeholder="Quantidade de vagas por Secretaria" size="2" maxlength="2">
                                <span class="errmsg"></span>
                            </div>
                        </div>
                    </div>                                     

                    <!-- plus -->
                    <div class="form-group">
                        <div class="col-sm-11 inputGroupContainer">
                            <div class="col-sm-offset-10 col-sm-1">                 
                                <button class="btn btn-primary btn-md btn-add">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Accept box and button submit -->
            <div class="form-group">
                <div class="col-sm-11 inputGroupContainer">
                    <div class="col-sm-offset-3 col-sm-8">    
                        <ul class="list-unstyled pull-right">
                            <li><button type="submit" class="btn btn-primary next-step" id="submitted" name="submitted">Salvar e Continuar</button></li>
                        </ul>
                    </div>
                </div>
            </div>

6
  • Seu código não funciona adequadamente porque mesmo quando o campo input não estiver focado, ao pressionar qualquer tecla, irá chamar a função.
    – Sam
    Commented 24/08/2017 às 17:49
  • Continua a mesma coisa. Faça o teste.
    – Sam
    Commented 24/08/2017 às 18:11
  • Agora não está mais, o que estava gerando o conflito era o código duplicado da função que verifica se foi digitado somente dígitos e exibe a mensagem de erro.
    – Leandro
    Commented 24/08/2017 às 18:22
  • Existiria alguma forma de somente aparecer mensagem de alerta para cada input individual que está sendo digitado, e não para todos ao mesmo tempo? Commented 24/08/2017 às 18:39
  • @RogerBastida Editei o código com uma forma de exibir a mensagem de alerta somente para o input que está sendo alterado.
    – Leandro
    Commented 24/08/2017 às 19:40

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 .