8

Validação de formulário com JavaScript é algo rotineiro no desenvolvimento web, mas sempre causam dor de cabeça! Minha situação é a seguinte: Não posso permitir a entrada de números em um campo do tipo 'nome', mas como posso fazer isso?

1
  • se alguma das respostas respondeu a tua perguntar, marca como resolvida sff 21/11/2014 às 18:21

7 Respostas 7

9

Recomendo o uso da propriedade Pattern do HTML5 para o feitio de uma verificação do tipo, pois não é necessário utilizar Javascript.

No caso, seu html seria o seguinte:

<input type=nome pattern="[^0-9]+"/>

Explicação:

"[^0-9]+" seria uma Expressão Regular(RegEx) informando que o usuário não pode informar números de 0 à 9(ou seja todos), e o + informa que não tem limite de caracteres, você pode colocar um limite substituindo o + por {50} por exemplo aí teria um limite de 50 caracteres.

Compatibilidade:

A propriedade pattern está presente em todos os navegadores que suportam HTML5.

Exemplo funcionando no JSFiddle

3
  • 2
    +1 por apresentar uma solução mais simples e sem a necessidade de javascript, além de ensinar uma nova funcionalidade que eu não conhecia. :)
    – Kazzkiq
    13/03/2014 às 13:58
  • Só um adendo: ele NÃO QUER permitir números em campos de nome, logo, o pattern correto seria \w+. 13/03/2014 às 16:34
  • 2
    o ^ nega toda a expressão meu caro, por isso 0-9 está sendo negado, ou seja, vale tudo menos números de 0-9, ou seja NÃO PERMITE números. 13/03/2014 às 16:45
7

O melhor que tens a fazer é arranjar uma expressão regular e ir comparar a input com a expressão.

Expressão regular:

var verifyInt = /\d+/g;

E agora pegas na input e usas o match para se a input contém os caracteres definidos na verfyInt igualando a null:

if ($("#idInputNome").val().match(verifyInt) != null) {
    alert("A input Nome contém caracteres numéricos!");
}

EDIT: Segue o fiddle:

Fiddle

Fiddle com validação para submeter formulário:

Fiddle com submit formulario

2
  • 1
    A pergunta do OP é a seguinte "Como verificar se existem números dentro de um input em Javascript" até aí sua resposta está certa, porém o OP também diz: Não posso permitir a entrada de números em um campo do tipo 'nome', mas como posso fazer isso? aí ele estaria falando da minha resposta. 13/03/2014 às 12:03
  • Para resolver isso o que fazia era: - Colocava uma variável global que representava os erros a true; - Antes de fazer o submit verificava o valor dessa mesma variável, caso fosse false fazia submit; A tua resposta funciona perfeitamente, só tens o problema de haver a existência de utilizadores com o browser desactualizado e não dê suporte a HTML5 13/03/2014 às 12:07
1

Desta maneira aqui já usei e testei e fica legal.

$('#id_do_seu_campo_input').bind('keyup', function() { 
    $(this).val( $(this).val().replace(/[^a-z]/g,'') ); 
});

abraço.

1
  • O problema desta solução é que o cursor será levado para a ultima posição quando o valor do campo for alterado com jQuery.fn.val para o novo valor. 13/03/2014 às 14:05
1

Você pode utilizar desta forma também.

$(document).ready(function(){
    $("#idInputNome").keypress(function (e) {
        var valor = String.fromCharCode(e.which);
        return !$.isNumeric(valor) ||
            (e.keyCode == 46 || e.keyCode == 9 ||
            e.keyCode == 8 || e.keyCode == 37 || e.keyCode == 39);
    });
});
1

2 MODOS.

1º modo crie através de uma mascara de entrada

<script src="jquery.js" type="text/javascript"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js" type="text/javascript"></script>

E depois colocaria apenas para aceitar caracteres ex:

jQuery(function($){
 $.mask.definitions['h'] = "[A-Za-z]";
  $("#ID_SeuCampo").mask("#hhhhhh");
});

Creio que irá funciona..

outro método é:

function apenas_string(event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode >= 48 && keyCode <= 57 || keyCode == 8 || keyCode == 46 || keyCode == 37 || keyCode == 39) return true;
return false;
}

OBS: nos keycode acima são apenas números, precisa descobrir os de letras, porém não sei se funcionária no Firefox...sei que o modo de captar keycode no firefox é diferente..por isso coloquei a var keycode = vários métodos...

<input type="text" id="xyz" onKeyPress="return apenas_string(event)" >
1

Creio que a melhor solução seja verificar se a tecla que está sendo pressionada corresponde a um número. Algo assim deve resolver o problema:

$('input').on('keypress', function(event) {

    if(/\d/.test(String.fromCharCode(event.keyCode))) event.preventDefault();

});
1

Como você cita na pergunta:

  • Não posso permitir a entrada de números

Está função não permitirá a entrada de caracteres inválidos(numéricos no seu caso), pode ser utilizado juntamente com uma validação final, como demonstrado pelos colegas.

$(document).ready(function() {
  $("#edt_text").keydown(function (e) {        
    // Ensure that it is a number and stop the keypress
    if ((((e.keyCode < 48 || e.keyCode > 105)) || !(e.keyCode > 57 && e.keyCode < 96))) {
        if(e.shiftKey) return;
        e.preventDefault();
    }
  });
});

Aqui tem um exemplo de funcionamento.

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 .