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

Como permitir apenas letras em um elemento <input type=

por Leonardo Teixeira
| 100.8k xp | 39 posts

Olá, desejo criar um formulário e que em um dos campos apenas seja aceite o valor digitado caso sejam apenas letras.

Tentei fazer o tratamento dos dados, porém ainda não encontrei uma maneira de evitar o uso de caracteres especiais como $%&*. Como posso fazer isso?

Escrevi esse Pen para melhor exemplificação do problema.

HTML

<form class="form"> 
  <label for="name">Qual o seu nome?</label>
  <input type="text" name="name" id="name" placeholder="Digite o seu nome">
  <button class="btn">Enviar</button>
</form>

JS

let form = document.querySelector(".form");
let btn = document.querySelector(".btn");

btn.addEventListener("click", (event) => {
  event.preventDefault();
  checkName(form);
});

function checkName(form) {
  let name = form.name.value;

  if (!isNaN(name) && name.length == 0) {
        console.log("Digite um nome válido.");
    } else {
    console.log(name);
  }
}
4 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Leonardo, tudo bem? Para isso você pode usar o pattern, algo do tipo:

<input pattern="([aA-zZ]+)">

Essa expressão regular vai permitir apenas letras minusculas e maisculas (sem espaço).

Espero ter ajudado

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Leonardo, tudo bem? Para isso você pode usar o pattern, algo do tipo:

<input pattern="([aA-zZ]+)">

Essa expressão regular vai permitir apenas letras minusculas e maisculas (sem espaço).

Espero ter ajudado

solução!
por Leonardo Teixeira
| 100.8k xp | 39 posts

Hmm, obrigado pela dica. Na verdade gostaria de efetuar a verificação via Javascript, pois planejo posteriormente imprimir os erros na tela. Dei uma pesquisada sobre o atributo pattern e me deparei com essa solução. 

let form = document.querySelector(".form");
let btn = document.querySelector(".btn");

btn.addEventListener("click", (event) => {
  event.preventDefault();
  checkName(form);
});

function checkName(form) {
  let name = form.name.value;

  let letters = /[aA-zZ]+/;

  if (name.match(letters)) {
    console.log(name);
  } else {
    console.log("Digite um nome válido.");
    }
}
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Leonardo, fico feliz que tenha resolvido seu problema. Basicamente essa solução faz a mesma coisa que o pattern, porém, de forma manual no JavaScript.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.