4

O problema que estou enfrentando é que não posso deixar o usuário digitar mais de uma vírgula no input (estou usando ASP.NET com behind em C#), porém também não posso usar o input type="number" pois a versão do framework que estou usando não deixa.

Tentei algumas coisas com JavaScript mas não obtive sucesso. Segue o código do input:

function SomenteNumero(e) {
            var tecla = (window.event) ? event.keyCode : e.which;
            if ((tecla > 47 && tecla < 58)) return true;
            else {
                if (tecla == 8 || tecla == 0 || tecla == 44 || tecla == 13) return true;
                else return false;
            }
        }
        
        var input = document.getElementById('NR_PESO');
        var oldVal = '';
        input.addEventListener('keyup', function () {
            var parts = this.value.split(',');
            if (parts && parts[1] && parts[1].length > 3) this.value = oldVal;
            oldVal = this.value;
        });
        
        
<input type="text" class="form-control" runat="server" maxlength="11" ID="NR_PESO" onkeypress='return SomenteNumero(event)' placeholder="XXXXXXX,XXX">

Estou salvando essas informações no banco MySQL como decimal(10,3) por isso preciso de somente três casas depois da vírgula e somente uma vírgula (sempre tem o cliente esperto suficiente pra colocar um '123,3,43' ou '123,,343'. Aceito jQuery também.

0

2 Respostas 2

3

Você pode verificar se a string contém mais de 1 vírgula com .match(/,/g). Se tiver, você mantém apenas a primeira e elimina as outras usando .substring() para pegar parte da string e faz um replace para eliminar vírgulas excedentes, se houver.

Só que eu sugiro usar o evento input em vez de keyup, porque isso evita que o usuário consiga colar um valor inválido usando apenas o mouse, já que o keyup só é disparado usando o teclado. Já o evento input dispara a qualquer alteração no campo.

Ficaria assim:

function SomenteNumero(e) {

   var tecla = (window.event) ? event.keyCode : e.which;
   if ((tecla > 47 && tecla < 58)) return true;
   else {
      if (tecla == 8 || tecla == 0 || tecla == 44 || tecla == 13) return true;
      else return false;
   }
}

var input = document.getElementById('NR_PESO');
input.addEventListener('input', function () {

   var v = this.value;
   var m = v.match(/,/g);

   if(m && m.length > 1){
      this.value = v.substring(0, v.indexOf(",")+1)
      + v.substring(v.indexOf(",")+1).replace(/,/g, '');
   }

});
<input type="text" class="form-control" runat="server" maxlength="11" ID="NR_PESO" onkeypress='return SomenteNumero(event)' placeholder="XXXXXXX,XXX">

2

Uma alternativa é usar o atributo pattern, contendo uma expressão regular que valida o formato (retirei alguns atributos do input neste exemplo, só para ficar mais sucinto):

/* mudar a cor quando o texto for inválido */
input { color: black; }
input:invalid { color: red; }
<form>
  <input type="text" maxlength="11" pattern="^\d{1,7}(,\d{1,3})?$" placeholder="XXXXXXX,XXX" required>
  <input type="submit" value="ok">
</form>

Me baseei no placeholder XXXXXXX,XXX, que diz que pode ter até 7 dígitos antes da vírgula, e até 3 dígitos depois.

A regex usa os marcadores ^ e $, que indicam respectivamente o início e fim da string. Assim eu garanto que o input só pode ter o que está na regex.

Depois tem o atalho \d, que corresponde a qualquer dígito de 0 a 9. A seguir, uso o quantificador {1,7} (no mínimo 1 e no máximo 7 ocorrências). Ou seja, posso ter de 1 a 7 dígitos.

Depois temos a vírgula e \d{1,3} (de um a 3 dígitos). Eu agrupo isso entre parênteses e depois coloco o ?, que torna esse trecho opcional (assim, a vírgula seguida de dígitos é opcional).

Se a vírgula e os números depois dela são obrigatórios, basta mudar para ^\d{1,7},\d{1,3}$.


Caso o valor digitado não esteja no formato indicado, o formulário não é submetido (tente digitar um valor inválido e depois clicar no "ok"). Nesse caso é exibida uma mensagem default do browser, mas se quiser, pode customizá-la:

let input = document.getElementById('NR_PESO');
input.addEventListener('input', () => {
    input.setCustomValidity('');
    input.checkValidity();
});
input.addEventListener('invalid', () => {
    input.setCustomValidity('Digite um número válido');
});
/* mudar a cor quando o texto for inválido */
input { color: black; }
input:invalid { color: red; }
<form>
  <input type="text" ID="NR_PESO" maxlength="11" pattern="^\d{1,7}(,\d{1,3})?$" placeholder="XXXXXXX,XXX"  required>
  <input type="submit" value="ok">
</form>

Esta solução não impede que o usuário digite um valor inválido, só impede que o formulário seja submetido, caso o valor não seja válido.

Lembrando que isso só valida o que foi preenchido no formulário, mas nada impede o usuário de enviar dados inválidos por outros meios. Então não esqueça de validar essas informações no servidor também, antes de tentar gravá-las no banco.

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 .