11

Boas pessoal, estou a tentar fazer uma validação mas ainda não obtive êxito. Quero fazer uma função que não me deixe introduzir números numa textbox.

Segue um exemplo de como faço atualmente.

 $(document).ready(function () {
    $('#nome_contacto').change(function validar() {
        var textoValida = $('#nome_contacto').val();

        if (textoValida == "1" || textoValida == "2" || textoValida == "3" || textoValida == "4" || textoValida == "5" || textoValida == "6" || textoValida == "7" || textoValida == "8" || textoValida == "9") {
            window.alert("Só letras");
        }
    });
});

6 Respostas 6

23
+50

Você pode fazer isso utilizando uma Expressão Regular. Olhe:

  $('#nome_contacto').on('input', function(e) {
    if(/[0-9]/g.test(this.value)){
      alert("Apenas letras");  
    }
  });

No caso a expressão foi /[0-9]/g que verifica a existência de números, que pode ser substituída por \d.

Teste aqui

$('#nome_contacto').on('input', function() {
  if (/[0-9]/g.test(this.value)) {
    alert("Apenas letras");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="nome_contacto" ></textarea>

Mas se você deseja realmente bloquear a entrada de números você pode verificar os keyCode. A lista completa destes está aqui.

Os keyCodes dos números vão de 48 a 57, assim, fiz a verificação 47 > keyCode < 57.

$('#nome_contacto').keypress(function(e) {
  var keyCode = (e.keyCode ? e.keyCode : e.which); // Variar a chamada do keyCode de acordo com o ambiente.
  if (keyCode > 47 && keyCode < 58) {
    e.preventDefault();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="nome_contacto"></textarea>

Usei o método .preventDefault() para bloquear a entrada.

Aqui vai uma alternativa para caso queira apenas números...

Devido a ambiguidade da pergunta, fiz essa opção:

$('#nome_contacto').keypress(function(e) {
  var keyCode = (e.keyCode ? e.keyCode : e.which);
  if (!(keyCode > 47 && keyCode < 58)) {
    e.preventDefault();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="nome_contacto"></textarea>

No caso basta negar a condição da opção anterior.

14
  • Obrigado. Estou editando com uma maneira de realemente bloquear a entrada, é a isso que se refere? Commented 5/01/2016 às 0:12
  • Ele quer apenas números, e não tá permitindo números. Eu coloquei apenas um !na frente da expressão !/[0-9]/g e acho que é isso né....
    – gustavox
    Commented 5/01/2016 às 0:14
  • Ah, não sei onde tava com a cabeça rsrsrs. Você está com a razão. Mas no caso é só mudar o texto do alert, o resto está de acordo. Na pergunta há afirmação dentro do alert, "Apenas letras".. E editei a resposta. Dê uma olhada. Commented 5/01/2016 às 0:21
  • 1
    @luisfigueiredo, caso tenha servido perfeitamente. você pode "aceitar" a resposta, assim o problema será tido como resolvido. Commented 5/01/2016 às 0:22
  • 1
    Isso aqui está confuso: "quero fazer uma função que não me deixe introduzir números numa textbox." O título diz que é só número, o corpo diz que não é para por número.
    – Largato
    Commented 5/01/2016 às 0:29
10

Uma alternativa às soluções apresentadas é bloquear somente o envio do formulário com os atributos de validação do HTML5, não a entrada do usuário.

Na verdade, não há como garantir que os dados inseridos estejam de acordo com o previsto, se o usuário quiser badernar ele o fará. Se estiver com o Javascript desabilitado no navegador e você possui uma validação por meio de script, ele passaria tranquilamente. Se ele quiser inspecionar o código-fonte da página e modificar algum atributo no HTML ou um função em um arquivo JS que tratam da validação, ele também passaria numa boa.

Por isso que no servidor devem existir outras checagens, esse assunto já gerou até uma pergunta sobre a eficiência da validação somente no client-side. A validação no client é somente uma tentativa de poupar recursos e evitar realizar requisições à toa para o servidor.

Voltando aos atributos de validação, uma das principais vantagens é eliminar a necessidade de usar Javascript para validar campos. Por outro lado, existe a boa má e velha história do suporte limitado em alguns navegadores, por isso a minha resposta pode não ser a melhor solução dependendo dos usuários que acessam (ou podem acessar) a sua página.

1ª solução: type='text' com atributo pattern

Uma forma é definir o atributo pattern do campo para aceitar somente números.

<input type='text' pattern='\d*'/>

Exemplo online.


2ª solução: Usar um campo do tipo number

Semanticamente, essa seria a melhor opção para criar um campo que aceita somente números, sem dúvidas. Porém, novamente vem a questão da compatibilidade e o suporte aos campos type='number' é péssimo.

<input type='number'/>

Exemplo online.


Pode até usar o seletor :invalid para informar o usuário que tipo de dados é esperado naquele campo:

p {
  color: #ea6153;
  display: none
}

input:invalid + p {
  display: inline
}
<input type='text' pattern='\d*'/>
<p>Ei! Este campo só pode ter números.</p>


Concluindo

Validações com HTML é algo recente, isto explica o suporte limitado em alguns navegadores. Mas vejo com bons olhos as implementações desse recurso desde que entrou na especificação, só precisamos dar mais um tempo.

Da mesma forma que precisávamos usar Javascript antigamente para fazer animações, por mais simples que fossem — hoje fazemos isto de forma elegante somente com as CSS3 — logo estaremos usando somente HTML para limitar as entradas em um campo.

O Can I Use? é um ótimo site para acompanhar a compatibilidade de uma feature. Existem bibliotecas como a Modernizr que estão aí para detectar essas features e ajudar o desenvolvedor a fazer uso de polyfill ou do que já existe nativamente.

4

Apenas uma alternativa, complementando a resposta do Samir Braga.

Exemplo para permitir apenas números num input de texto sem o uso de jQuery:

document.getElementById("nome_contato").onkeypress = function(event) {
    var keyCode = (event.keyCode ? event.keyCode : event.which);
    if (!(keyCode > 47 && keyCode < 58)) {
        event.preventDefault();
    }
};
2

Fiz um código simples. Veja se ajuda.

document.getElementById('texto').addEventListener( 'keyup', function() {

    this.value = this.value.replace( /[0-9]*/g, '' );

});
<input type="text" id="texto" />

1

Uma maneira simples de resolver isso é assim:

function isNumber(el) {
    var reg = /[0-9]+/; 
    if ( reg.exec(el) ) {
        return true;
    }
   return false;
}

$(document).ready(function () {
    $('#nome_contacto').on('change', function() {
        var textoValida = $('#nome_contacto').val();
         if (isNumber(textoValida)) {
            alert("Só utilize letras!");
            return false;
         }
    });
});

Mas se você quer simplesmente travar o campo, basta fazer um replace com keyup ou keypress:

$(function() {
    $('#nome_contacto').on('keypress', function() {
        $(this).val($(this).val().replace(/[0-9]+/g,''))
    });
});

input:

<input type="text" id="nome_contacto">

Há também maneiras utilizando o atributo pattern do HTML5:

<input type="text" required="required" name="text" pattern="[^0-9]+$" />
0

Costumo usar o Jquery Mask (https://igorescobar.github.io/jQuery-Mask-Plugin/)

depois crio as regras com expressão regular ex:

$('.soNumeros').mask('########', {
            'translation': {
                #: { pattern: /[0-9]/ },
            }
        });

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 .