links ayuda:
http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado13.html
http://questchile.wordpress.com/2007/08/22/manejando-eventos-del-teclado-con-javascript/
Ahora si empezamos:
Supongamos que tenemos una caja de texto donde guardaremos el nombre de nuestro usuario:
<html><head></head><body><form id="nuevo" name="nuevo" method="post" action="manejador_php_del_formulario.php"> Nombre <input type="text" name="nombre" /> </form> </body></html>nota: El uso del formulario (etiqueta form) no es precisamente necesario si no se quiere enviar la informacion capturada a algun lado como p.e una cuenta de correo o una bd.
Bueno ya tenemos nuestra caja de texto en una pagina html ahora definimos que es lo que queremos validar, en primer lugar nos interesa que la caja de texto no se encuentre vacia. veamos como validar esto:
nota2: Recordar que es recomendable poner el codigo js dentro de las etiquetas de cabecera (head) aunque puede ir en cualquier otro lado.
_________________________________________________
VALIDAR QUE UN CAMPO NO SE ENCUENTRE VACIO
SECCION DE CODIGO
----------------------------------------------------------------------
<script language="javascript" type="text/javascript"> //declaramos inicio de codigo JS //esta funcion nos sirve para saber si hay por lo menos un caracter dentro del texbox, muchos hacen simplemente algo como //if (campo=="") alert ("favor de no insertar su nombre");, pero esta validacion puede estar sujeta a errores ya que si el usuario inseta uno o muchos espacios en blanco la condicion anterior dejara de ser verdadera ya que el texbox contendra algo aunque estos sean espacios en blanco, por eso aqui saltamos los espacios en blanco y verificamos si hay algo mas. function vacio(q) { //la variable q contiene el valor del texbox for ( i = 0; i < q.length; i++ ) { //la funcion q.length devuelve el tamaño de la palabra contenia por el textbox if ( q.charAt(i) != " " ) {//la funcion q.charAt nos deuelve el caracter contenido en la posicion i de la variable q return true } } return false;}//valida que el campo no este vacio y no tenga solo espacios en blancofunction valida(F) { if( vacio(F.campo.value) == false ) { alert("Escriba su nombre"); return false } else { alert("Gracias por su cooperacion"); return true } }</script><!-- codigo html: --><p><FORM NAME="formulario" METHOD="post" ACTION="mailto:miEmail@miDominio.com" onSubmit="return valida(this);">Introduzca usu nombre por favor:<BR><INPUT TYPE="text" NAME="campo" size="8"><BR><INPUT TYPE="submit" name="validar" value="Validar"></FORM></p><!-- nota: Es importante hacer una pausa para que observen la siguiente linea: onSubmit="return valida(this)" que es la llamada a la funcion JS dado el evento de enviar el formulario (onSubmit), observamos que valida(this), es la funcion, this es el parametro que nos hace referencia a que le mandamos el conjunto de valores contenidos en el formulario, esta valor es sinonimo de document.nombreFormulario y para finalizar es importante observar la palabra return, esta palabra cobra importancia cuando se encuentra como evento de la etiqueta form, el por que es el siguiente:Como habran visto en las funciones JS que creamos terminamos siempre con un return ya sea return false o return true, lo que hace esto es regresar un valor (true o false)al sitio desde donde se llamo la funcion en este caso onSubmit="return valida(this)" y aqui a su vez por la instruccion return enviamos el falor recivido de la funcion valida(this) ya sea un false o un true al formulario, esto es muy importante ya que si enviamos un return false nos estara diciendo que las validaciones son incorrectas y el formulario no se enviara, si por el contrario enviamos un true quiere decir que las validaciones son correctas y el formulario sera enviado a su destino, el cual esta definido por el parametro action, en este caso se mandara a una direccion de correo: ACTION="mailto:miEmail@miDominio.com" aunque puede ser enviado a un script que pueda manejar esta informacion, ya sea de AJAX, ASP y muy comunmente a uno de PHP: ACTION="prosesar_informacion.php".-->____________________________________________________
--------------------------------------------------------------------------
Ahora bien como en este caso como estamos hablando de un nombre, comunmente estos no contienen numeros por lo que la segunda validacion sera que acepte solo letras, esto se puede hacer de 2 formas una dejar al usuario que escriba su nombre tal cual y cuando ocurra un evento como p.e que pierda el foco, se presione enter o cuando se presione un boton se checa el nombre que escribio el usuario y si este contiene numeros mandar un mensage de error y poner en blanco el textbox, o bien podemosverificar letra por letra lo que inserta el usuario y si la tecla presionada es un numero simplemente ignorarla , es decir que no aparesca en el textbox, veamos practicamente como es esto:
_____________________________________________________
VALIDAR QUE SOLO HAYA LETRAS, forma 1
(sin usar expresiones regulares)
SECCION DE CODIGO
---------------------------------------------------------------------------
<script language="javascript" type="text/javascript">//inicio del codigo JS //esta funcion recibe una palabra como parametro y verifica que todos los caracteres de la palabra sean caracteres validos. function ValidaCampo(campo) { var caracter var caracteres = "abcdefghijklmnopqrstuvwxyzñABCDEFGHIJKLMNOPQRSTUVWXYZÑáéíóúÁÉÍÓÚ" + String.fromCharCode(13) //en esta variable se guardaran todos los caracteres que pueden ser aceptados, la funcion String.fromCharCode(13) nos devuelve el caracter que en codigo se representa por un 13 en este caso el 13 representa un enter. var contador = 0 for (var i=0; i < campo.length; i++) { //creamos un ciclo para recorrer caracter por caracter la palabra contenida en la variable campo caracter = campo.substring(i, i + 1) //con la funcion substring obtenemos el caracter de la posicion i de la palabra a validar if (caracteres.indexOf(caracter) != -1) {//lo que hacemos aqui es buscar si el caracter contenido en la variable caracter se encuentra en la palabra caracteres ,esto a traves de la funcion indexOf la cual detecta si en una frase o cadena existe un valor o palabra identica. si es asi nos devuelve el indice que indica la pocicion donde lo encontro, si no lo encuentra nos manda un numero negativo. contador++ } else { alert("ERROR: No se acepta el caracter '" + ubicacion + "'.") return false } } alert("Datos correctos.") return true}</script> <!-- LINEA HTML --><form id="nuevo" name="nuevo" method="post" action="manejador_php_del_formulario.php" OnSubmit="return ValidaCampo(this.nombre.value);">VALIDAR QUE SOLO HAYA LETRAS, forma 2
____________________________________________________________
(USANDO EXPRESIONES REGULARES)
links ayuda:http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado5.html Chequen el link ahi va la teoria esta ok
http://javascript.espaciolatino.com/lengjs/jsgram/expregulares.htm Tablas de referencia muy utiles para la creacion de expresiones regulares.
SECCION DE CODIGO
--------------------------------------------------------------------------------------
Una expresion regular se declara de la siguiente manera:
var miexpresion=/expresion/; donde:
miexpresion es el nombre de la variable que guardara la expresion
"/" indica el inicio y el fin de la expresion
expresion es el formato que deseamos que nuestras cadenas a validar contengan.
nota: para evitar posibles errores en las expresiones regulares es recomendable siempre iniciar con ^ y terminar con $.
para validar una cadena se hace mediante el metodo test propio de las expresiones regulares, veamos esto:
var respuesta=miexpresion.test("cadena_a_validar");
Que es lo que pasa aqui, bien pues dado un formato determinado a "miexpresion", la cadena "cadena_a_validar" debera cumplir con ese formato, si esto es asi la funcion regresara true, en caso contrario regresara false, veamos como es esto:
<script language="JAVASCRIPT">var expresion=/a/;//esta expresion nos verifica si en la cadena a validar se encuentra la letra a p.e devuelve true si la cadena a validar es "azul","casa","a","la" etc y devuelve false si no existe ninguna a p.e "perro","l"var expresion2=/^a/;//si ponemos el simbolo ^ forzamos a que nuestra cadena comience con a, es decir la cadena sera valida (la funcion regresara true) en cadenas tales como "azul","amarillo","arcon" y false en cadenas como "mama","sala","la"var expresion3=/a$/;//si ponemos el simbolo $ forzamos a que nuestra cadena termine en a, es decir una cadena valida sera "casa" y una no valida sera "arancel".var expresion4=/[0-9a-fA-F]+/;//si encerramos caracteres entre [] lo que nos dice es que su contenido es opcional es decir una cadena valida es aquella puede contener numero o letras ya sea mayusculas o minusculas con lo caul una cadena valida seria "hola agente 007" y una no valida seria "hola agente 007$", con el signo + forzamos a que la cadena contenga como minimo un caracter o mas ya que si no la funcion tambien tomaria como valida cadenas sin ningun caracter "".//como mencionamos para evaluar la expresion simplemente se pone elnombre de la variable que contiene la expresion regular y se llama a la funcion test:if (expresion2.test("hola")){ alert ("La cadena empieza con a")}else alert ("La cadena no inicia con a"); </script>
nota: para ver todas las funciones con las que podemos auciliarnos a la hora de construir expresiones regulares verificar el siguiente link:
http://javascript.espaciolatino.com/lengjs/jsgram/expregulares.htm
para finalizar evaluemos nuestro campo nombre para que solo acepte letras:
<script language="javascript"> var er_nombre=/[A-Za-z]/; function validar(f){ if(er_nombre.test(f.nombre.value)) alert ("el nombre es correcto puede contienur"); else alert("su nombre tiene carcteres no permitidos favor de verificarlo, gracias"); } </script> <!-- <form id="nuevo" name="nuevo" onSubmit="return validar(this);" method="post" action="manejador_php_del_formulario.php"> --> ___________________________________________________________
VALIDANDO QUE SOLO HAYA LETRAS forma 3
(verificando letra por letra)
links ayuda:http://questchile.wordpress.com/2007/08/22/manejando-eventos-del-teclado-con-javascript/
----------------------------------------------------------------------------------------------
Otra forma de validar un textbox es verificar si la tecla que se pulso corresponde a un caracter valido si es asi la escribe si no simplemente la ignora, para saber si ese caracter es valido se puede usar cualquiera de las dos funciones anteriores, ahora bien para saber como capturar letra por letra veamos el siguiente ejemplo:
el textbox en codigo html seria:
<input type="text" name="nombre" onkeydown="tecla(event);" /> y el codigo JS seria: <script type="text/javascript">//la funcion tecla recibe como parametro el ultimo evento que sucedio, en este caso como el text box esta configurado para llamar a la funcion cada que se presione una tecla, la funcion recibira presisamente el evento que se genero al presionar esa tecla, los eventos contienen mucha informacion de la cual se puede sacar provecho, en esta ocasion queremos saber que tecla desencadno dicho evento pero esta no es launica informacion que podemosobtener de esa variable tipo evento que recibimos, para saber mas acerca del objeto event checar este enlace:http://www.librosweb.es/javascript/capitulo6/obteniendo_informacion_del_evento_objeto_event.htmlfunction tecla (e) { var evt = e ? e : event;//no se espanten al ver esta expresion es un simple if lo que nos dice es que: si la variable e es true entonces asignamos a evt el valor e(e?e), si la variable es false entonces asignamos el ultimo evento ocurrido a la variable evt (:event) var key = window.Event ? evt.which : evt.keyCode;//esta validacion se hace por la compativilidad de los navegadores, explico: el IE utiliza un objeto llamado window.event para capturar sus eventos y usa el metodo whitch para saber que tecla se presiono, mientras tanto otros navegadores como el firefox o el desaparecido netscape utilizan el metodo keyCode para saber cual es la tecla presionada y para ellos no existe el window.event, es por eso que si el navegador del usuario es IE el window.event va a regresar un true por lo tanto asignamos el valor de evt.which es decir la tecla que se presiono, repito esto hablando del IE por otro lado si window.event da false significa que el navegador no usa este metodo y por lo tanto no es el IE por lo consiguiente usamos el metodo propio (evt.keyCode) para asignarle a la variable key la tecla que se preiono. alert (key);//y por ultimo imprimimos el caracter que se recibio.}</script>
bueno espero que les sea de ayuda dudas, sugerencias, comentarios, dolencia y demas no duden en profesarlas.ciao
1 comentario:
MARKO:
Creo que hay una manera más fácil de validar que solamente se inserten números en un TextBox.
Espero les sirva.
function validarNro(e) {
var key;
if(window.event) // IE
{
key = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
key = e.which;
}
if (key < 48 || key > 57)
{
return false;
}
return true;
}
Publicar un comentario