Validate a text box with Jquery Plugin

Question

Validate a text box with Jquery Plugin

Navigation

#1 by (1 votes)

0

The question I have is how to make it so that in a text box where a name will be entered, the user, no matter how hard he tries, can not enter numbers in the text box, I want to do it with Jquery without using methods or functions.

I have a code with which I started, so far I have only been able to validate that the user has entered letters or numbers, but the moment I mix letters with numbers he takes it as if it were only letter

What I want to do is that the user in that text box can not enter numbers:

My html code:

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

My code in 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");
            }
        }
    });


});

the p-label is to test how I get the values

jquery html5

asked by DagsDroid 06.03.2018 в 05:37

source

1 answer

Assign a foreign key from one form to another in django and redirect with reverse_lazy Insert 3 more days to the current date add Saturday and Sunday

score 1 · Accepted Answer

You can try using a function that automatically deletes written numbers using regular expressions :

$('#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>

You can also use the pattern attribute to validate before submitting the form, using the regular expressions [A-Za-z] of only letters (here uppercase and lowercase) when press send, it will warn you if the input is correct or not:

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