2

Estoy intentando la validación de un formulario el cual valide letra por letra ingresada en un input HTML, mi codigo es el siguiente:

<html>
<head>
...
<script>
$(document).ready(function(){

    var nombre;

    $("#nombre").keypress(function(){

        nombre=$("#nombre").val();
        if(nombre<3){
        $("#nombre-form-alert").css("display","block");
        }


    });
});

</script>
<head>
<body>
<form action='' method='' id='form-mp'>
...
<input type="text" id='nombre' name='nombre'><br>
<p class="form-alert" id="nombre-form-alert" style="display:none;color:red;"">Ingrese un nombre valido</p>
...
</form>
...
</html>

El problema es que nada mas el script funciona en el primer caracter ingresado y despues no hace nada, estube intentando usando un alert("caracter ingresado") despues de cada keypress.

saludos !!

1
  • Es posible que el evento onkeypress no haya sido aplicado a tu input. Revisa las respuestas que la comunidad te ha brindado. Commented el 15 mar. 2017 a las 20:58

4 respuestas 4

1

El problema es porque estas utilizando keypress, para la validación que quieres realizar debería ser keyup. Además la validación es incorrecta, para verificar la longitud de un texto debes utilizar .length. Prueba con el siguiente código:

$(document).ready(function(){

var nombre;

$("#nombre").keyup(function(){
    nombre=$("#nombre").val();
    if(nombre.length<3){
    $("#nombre-form-alert").css("display","block");
    }
	else{
    $("#nombre-form-alert").css("display","none");
    }
});
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

<form action='' method='' id='form-mp'>

<input type="text" id='nombre' name='nombre'><br>
<p class="form-alert" id="nombre-form-alert" style="display:none;color:red;"">Ingrese un nombre valido</p>

</form>
</body>
</html>

0

Te lo voy a mostrar con un ejemplo

tu codigo html :

 <input id="nombre" type="text" onkeypress="return validarSiNumero(event)"></input>

y en js:

 //Esto en caso de que nada mas quieras numeros
function validarSiNumero(e){
    var key = window.event ? e.keyCode : e.which;
    if ((48 <= key && key <= 57) || (key == 0) || (key == 8)) 
     { return true; } else { return false; } // -
}

//Esto en caso de que nada mas quieras letras
function validarLETRA(s) { 
if (!/^[a-zA-Z ]*$/.test(s)) {
    alert("Este campo solo acepta letras");        
}    

}

0

Entiendo por la descripción de tu problema que necesitas validar el tamaño del nombre ingresado y mostrar el error si es menor a 3 caracteres. Si esto es así, te recomiendo que utilices keyup como se muestra a continuación. Igualmente, como recomendación, deberías agregar la validación antes de enviar el formulario al servidor utilizando

$('form').submit(function() { /* aqui validas */ })

Ejemplo de lo que necesitas:

    $(function(){
       var nAlert = $('#nombre-form-alert');
       $('#nombre').keyup(function() {
         if($(this).val().length < 3)
           nAlert.show();
         else
           nAlert.hide();
       });
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nombre :
<input type="text" id='nombre' name='nombre'><br>
<p class="form-alert" id="nombre-form-alert" style="display:none;color:red;"">Ingrese un nombre valido</p>

-2

No estás validando la longitud sin invocar el atributo length del objeto.

$(document).ready(function(){
		
		var nombre;

		$("#nombre").keyup(function(){
			nombre=$("#nombre").val();
			if(nombre.length < 3){
            $("#nombre-form-alert").css("display","block");
			} else {
           $("#nombre-form-alert").css("display","none");
      }


		});
	});
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
    <form action='' method='' id='form-mp'>
    <input type="text" id='nombre' name='nombre'>
    <p class="form-alert" id="nombre-form-alert" style="display:none;color:red;">Ingrese un nombre valido</p>
    </form>
    </body>
    </html>

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.