How to make an input to accept only letters?

Question

How to make an input to accept only letters?

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I am making a form and the user has to type only letters in the field of his name, I want to block him to type some other type of character ah not be the letters, how do I? I am programming with HTML5 and CSS 3. The form will be WEB.

javascript html css

asked by anonymous 15.07.2016 / 20:53

2 answers

PHP - Mysqli correct way HEAD is detached in repository

score 3 · Answer 1

I'll make an example in javascript pure.

Using regular expressions.

<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>

This way you are accepting letters, accented letters and spaces.

It is advisable to perform validation on the database as well.

Here's a simple example in php .

recib_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; 
    }
}
?>

score 3 · Answer 2

Hello, you can use Jquery to do this or use javascript without it.

Example with jQuery, you do not need to wrap in input , just be between <script></script>

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

No jQuery:

In the input you will have to use an event type:

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

Function between tags <script></script> at the end of code

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;
}