Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Permitir apenas letras no input.

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Validação de Formulários e atividade Mãos na massa: validando o form

por Vinicius Bortoletto
| 115.3k xp | 81 posts

Olá.

Gostaria de saber se há alguma maneira de permitir que o usuário digite apenas letras e acentos no input para campo NOME. Consegui permitir apenas números nos campos PESO, ALTURA e GORDURA usando type="number". 

<input id="peso" name="peso" type="number" placeholder="digite o peso do seu paciente" class="campo campo-medio">

Encontrei uma função em um site que me permite apenas digitar letras, porém não acentos. Sem contar que não compreendi muito a função.

Input no HTML

<input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo" onkeypress="return ApenasLetras(event,this);">

Função no JavaScript

function ApenasLetras(e, t) {
    try {
        if (window.event) {
            var charCode = window.event.keyCode;
        } else if (e) {
            var charCode = e.which;
        } else {
            return true;
        }
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
            return true;
        else
            return false;
    } catch (err) {
        alert(err.Description);
    }
}

Agradeço de alguém puder ajudar.

4 respostas
por Guilherme Tadeu
| 695k xp | 1154 posts
Java Developer

Olá Vinicius!

Hoje em dia com o HTML5 conseguimos fazer essas validações.

Utilizamos Expressões Regulares (regex) para validar um campo direto na tag.

Para validar nomes (letras, acentos):

<input type="text" required="required" name="text" pattern="[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$" />

Para validar números (0-9):

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

Para que a validação funcione os campos precisam estar dentro de um formulario juntos de um botão Submit que ao clicado verifica se está tudo ok nos inputs.

<form>
    NOME: 
    <input type="text" required="required" name="text" pattern="[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$" />

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

    <button type="submit">Validar</button>
</form>

Espero que tenha ajudado! :D

Bons estudos! ^^

por Vinicius Bortoletto
| 115.3k xp | 81 posts

Olá Guilherme.

Tentei usar o pattern que me passou, mas ainda assim consigo digitar números aonde quero apenas letras. Também consigo enviar o formulário preenchido, sem que o "aviso" apareça dizendo que não posso digitar números.

<input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo" required="required" pattern="[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$" />

Talvez não esteja funcionando devido as condições criadas no JS? E mesmo que funcionasse, ainda consiguiria digitar números, apenas não poderia enviar o formulário. Exite alguma maneira em que os números não apareçam quando digitados?

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Vinicius tudo bem?

Fiz esse código aqui de exemplo, dá uma olhada e veja se é o que precisa.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Insira o nome</title>
    <script>
        function verificar(){

            var texto=document.getElementById("entrada").value;

            for (letra of texto){

                if (!isNaN(texto)){

                    alert("Não digite números");
                    document.getElementById("entrada").value="";
                    return;

                }


                letraspermitidas="ABCEDFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyzáàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ"

                var ok=false;
                for (letra2 of letraspermitidas ){

                    if (letra==letra2){

                        ok=true;

                    }


                 }


                 if (!ok){
                    alert("Não digite caracteres que não sejam letras ou espaços");
                    document.getElementById("entrada").value="";
                    return; 

                 }

            }

        }


    </script>
</head>
<body>
    <input id="entrada" placeholder="Insira o nome" onchange="verificar()">
</body>
</html>

Espero ter ajudado!!!

solução!
por Vinicius Bortoletto
| 115.3k xp | 81 posts

Olá André, obrigado também pela ajuda. Mas não era bem isso que queria. O código que me mandou ainda posso digitar números no campo, porém rebebo a mensagem quando tento enviar.

Estava mesmo procurando algo que me impedisse de digitar, que os números não aparecessem no input.

Mas usando o código que eu tinha encontrado anteriormente consegui faze-lo funcionar. Antes ele permitia apenas letra sem acentos, mas descobri o keycody para as letras acentuadas e adicionei também. Segue ele:

function ApenasLetras(e, t) {
    try {
        if (window.event) {
            var charCode = window.event.keyCode;
        } else if (e) {
            var charCode = e.which;
        } else {
            return true;
        }
        if (
            (charCode > 64 && charCode < 91) || 
            (charCode > 96 && charCode < 123) ||
            (charCode > 191 && charCode <= 255) // letras com acentos
        ){
            return true;
        } else {
            return false;
        }
    } catch (err) {
        alert(err.Description);
    }
}

Obrigado a todos pela ajuda mesmo assim. :)