2

Estou fazendo um formulario e o usuario tem que digitar somente letras no campo do nome dele, eu quero bloquear para ele digitar algum outro tipo de caractere ah nao ser as letras, como faço? Estou programando com HTML5 e CSS 3. O formulario vai ser WEB.

3
  • 1
    Você está fazendo isso em Web, Desktop em que linguagem? Edite sua pergunta para não ser negativado..
    – JcSaint
    15/07/2016 às 18:54
  • Que browsers queres suportar? Que liguagem estás a usar?
    – Sergio
    15/07/2016 às 18:54
  • Por favor não juntes partes de respostas para incluir na pergunta. Junta o código que tens mas sem modificar a pergunta com pedaços de respostas.
    – Sergio
    15/07/2016 às 19:19

2 Respostas 2

4

Olá, você pode utilizar o Jquery para efetuar isso ou utilizar o javascript sem ele.

Exemplo com jQuery, não precisa mecher no input, apenas estar entre as tags <script></script>

$("#exemplo").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if(this.value.match(regexp)){
    $(this).val(this.value.replace(regexp,''));
  }
});

Sem jQuery:

No input vai ter que utilizar um evento tipo:

<input id="exemplo" onkeypress="return lettersOnly(event);"/>

Função entre as tags <script></script> no fim do código

function lettersOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
        ((evt.which) ? evt.which : 0));
    if (charCode > 31 && (charCode < 65 || charCode > 90) &&
        (charCode < 97 || charCode > 122)) {
        alert("Enter letters only.");
        return false;
    }
    return true;
}
10
  • Sim eu estou usando jquery. Vou testar aqui com jquery!
    – user49744
    15/07/2016 às 19:12
  • 1
    Eu testei aqui pra fazer com jquery irei enviar uma parte do meu codigo para voce ver...
    – user49744
    15/07/2016 às 19:15
  • Confira ai e me ajude se possivel eu tenho que fazer o input text aceitar somente letras.
    – user49744
    15/07/2016 às 19:16
  • jsfiddle.net/71ufqe34/1 Dá uma olhada 15/07/2016 às 19:20
  • Toma cuidado com o uso do patter pois de acordo com o w3schools ele não suporta alguns navegadores antigos nem no safari, e isto é um sério problema. 15/07/2016 às 19:26
3

Vou fazer um exemplo em javascriptpuro.

Utilizando expressões regulares.

<form name="form_name" action="recebe_form.php" method="post">
    Name:
    <input id="input_nome" type="text" name="fname">
    <input type="submit" value="Submit" onclick="valida_nome()">
</form>
<script>
    function valida_nome() {
        var filter_nome = /^([a-zA-Zà-úÀ-Ú]|\s+)+$/;
        if (!filter_nome.test(document.getElementById("input_nome").value)) {
            document.getElementById("input_nome").value = '';
            document.getElementById("input_nome").placeholder = "Nome inválido";
            document.getElementById("input_nome").style.borderColor = "#ff0000";
            document.getElementById("input_nome").style.outline = "#ff0000";
            document.getElementById("input_nome").focus();
            document.getElementById("input_nome").onkeydown = function keydown_nome() {
                document.getElementById("input_nome").placeholder = "";
                document.getElementById("input_nome").style.borderColor = "#999999";
                document.getElementById("input_nome").style.outline = null;
            }
            return false;
        } else {
            document.getElementById("input_nome").value = '';
            document.getElementById("input_nome").placeholder = "Nome Válido";
        }
        return true;
    }

</script>

Dessa forma esta aceitando letras,letras acentuadas e espaços.

É aconselhável realizar a validação no banco de dados também.

Segue um exemplo simples em php.

recebe_form.php

<?php

$name = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){
    if(empty($_POST["nome_cad"])){
        return false;
    }else{
        $nome = htmlspecialchars($_POST["input_nome"]);
        if(!preg_match("/^([a-zA-Zà-úÀ-Ú]|\s+)+$/",$nome)){
            return false; 
    }
}
?>

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 .