How to input accepting only letters?

Question

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

Answer 1

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

Example with jQuery, no need to move on input, just be between tags <script></script>

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

Without jQuery:

In input you will need to use a type event:

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

Function between tags <script></script> at the end of the 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;
}

Answer 2

I will make an example in javascriptpure.

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 accept letters, accented letters and spaces.

It is advisable to perform the validation in the database also.

Here is a simple example on php.

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