1

La pregunta que tengo es como hacer para que en una caja de texto donde se ingresará un nombre, el usuario por mas que intente no pueda ingresar numeros en la caja de texto, quiero hacerlo con Jquery sin usar metodos o funciones.

Tengo un codigo con el que empece, hasta el momento solo he podido validar que el usuario ha ingresado letras o numeros, pero en el momento en que mezclo letras con numeros me lo toma como si fuera solo letra

Lo que quiero hacer es que el usuario en esa caja de texto no pueda ingresar numeros:

Mi codigo html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Practica con jquery</title>
    <link rel="stylesheet" type="text/css" href="plugins/BootsTrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
    <main>
        <div class="titulo">
            <h2>Formulario de prueba</h2>
        </div>      
        <form action="#" method="POST" class="formulario">
            <label>Nombre: </label>
            <input type="text" id="txtNombre" name="txtNombre" placeholder="Ingrese su nombre"><p id="pp"></p>
            <label>Apellido: </label>
            <input type="text" id="txtApellido" name="txtApellido" placeholder="Ingrese su Apellido">
            <label>correo: </label>
            <input type="text" id="correo" name="correo" placeholder="[email protected]">

            <input type="submit"  id="enviar" name="enviar" class="btn btn-success" value="Enviar">
        </form>
        <button id="buton">Hola</button>
    </main>

    <script type="text/javascript" src="plugins/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="plugins/BootsTrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Mi codigo en Jquery:

$(document).ready(function () {

    var nombre = document.getElementById('txtNombre');

    nombre.addEventListener('keyup', function() {
        var nom = document.getElementById('txtNombre').value;
        if (isNaN(nom)){
            var r= "Este es un valor";
            $('#pp').html(r);
        }else{ 
            if (Number(nom)){
                $('#pp').html("Por favor no ingrese numeros");
            }
        }
    });


});

la etiqueta p es para probar como me agarra los valores

1 respuesta 1

3

Puedes probar utilizando una función que al escribir borre automaticamente los números escritos utilizando expresiones regulares:

$('#txtNombre').keyup(function(){
  var nombre = $(this);
    nombre.val( nombre.val().replace(/[0-9]/g, function(str) { return ''; } ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtNombre" name="txtNombre" placeholder="Ingrese su nombre" pattern="[a-z]"><p id="pp"></p>

Tambien puedes utilizar el atributo pattern para validar antes de enviar el formulario, utilizando las expresiones regulares [A-Za-z]+ de solo letras (aqui mayusculas y minusculas) cuando presiones enviar te advertirá si es correcto o no el input:

<form action="/" method="post">
   <input type="text" name="nombre" pattern="[A-Za-z]+" placeholder="su nombre" title="solo letras, por favor" required>
   <input type="submit">
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.