Validacin de campos de formulario con JavaScript

1. 2. 3. 4. Introduccin Evento onSubmit El objeto this Ejemplos

1. Introduccin
Una de las grandes aportaciones de JavaScript a la creacin de interfaces web es la posibilidad de acceder al contenido de los campos de los formularios para realizar acciones sobre los valores introducidos por el usuario, modificarlos y, en ltima instancia, validarlos. La validacin de los datos de un formulario mediante scripts JavaScript no sustituye a la validacin que debe realizarse, por motivos de seguridad, en la aplicacin del servidor que recibe la informacin. Sin embargo, al aadir una validacin local con JavaScript, la experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener slo un mensaje informando de la incorreccin de la informacin suministrada. Resulta frustrante cumplimentar un formulario, pulsar el botn enviar, y esperar 30 o 40 segundos para saber que hemos introducido mal un campo. JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para validar campos de formulario. Estas son algunas de las validaciones tpicas:

Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.) Comprobar la validez (sintctica) de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la entrada

La siguiente gua ayuda a entender el funcionamiento de la validacin de formularios con JavaScript, y enlaza con numerosos ejemplos de nuestra seccin de cdigo que pueden ser utilizados de modelo para crear la validacin deseada.

2. Evento onSubmit
La validacin de campos de formulario se basa en interceptar el momento en que el usuario realiza el envo de los datos del formulario (es decir, pulsa sobre el botn de enviar). Como es sabido, el botn de envo de datos se codifica con HTML mediante un tipo especial de objeto de formulario, llamado submit. El siguiente ejemplo muestra un formulario con un botn de envo:

<form name="miFormulario" action="mailto:mi@mail.com"> <input type="submit" value="Enviar" name="enviar"> </form> Cuando el usuario pulsa sobre el botn, el navegador ejecuta la accin codificada en el parmetro action del formulario. En el ejemplo anterior, hemos incluido una accin de tipo mailto:, es decir, de envo de datos por correo electrnico. Lo normal es que la accin sea la invocacin de un programa que se ejecuta en el servidor remoto, y que recibe los datos de acuerdo a la especificacin CGI (Common Gateway Interface). Para ampliar la informacin sobre esta interfaz, consulta nuestro tutorial Pero qu es eso de los CGIs? Cuando el usuario pulsa sobre el botn de enviar, se genera el evento submit, asociado al envo de datos de un formulario. JavaScript proporciona un mecanismo para capturar este evento, lo que nos permite ejecutar un script justo antes de que se realice el envo de los datos. La forma de capturar el evento consiste en introducir el atributo onSubmit en la etiqueta del formulario cuyo evento submit queremos capturar. De esta forma, para capturar el evento submit del formulario del ejemplo anterior escribiramos: <form name="miFormulario" action="mailto:mi@mail.com" onSubmit="alert('Has pulsado enviar.'); return false;"> <input type="submit" value="Enviar" name="enviar"> </form> En esta nueva versin del formulario, al pulsar sobre el botn de envo se ejecutar el cdigo incluido como valor del atributo onSubmit. En este caso, se trata de un simple alert() JavaScript informando de que se ha pulsado sobre el botn de envo. Puede comprobarse el funcionamiento pulsando sobre el siguiente botn: El cdigo JavaScript que se ejecuta antes del envo del formulario es, en el ejemplo anterior, un alert(). Sin embargo, se puede observar que se ha aadido un return false al final de la lnea de cdigo. Esta es la forma de indicar al navegador si la validacin ha sido correcta o incorrecta. Si el cdigo JavaScript (normalmente una funcin de validacin) del atributo onSubmit devuelve false, la validacin es incorrecta y el navegador no contina con el envo del formulario tras ejecutar dicho cdigo. Por el contrario, si devuelve true la validacin es correcta y el formulario se enva normalmente. Podemos modificar el ejemplo anterior para devolver true tras mostrar el alert-box. El ejemplo siguiente permite comprobar lo que sucede en ese caso. Se abrir el cliente de correo por defecto para iniciar el envo de un mensaje de correo a la direccin suministrada como mailto: en el atributo action.

3. El objeto this

Normalmente, el evento onSubmit ejecuta una funcin de validacin, como en el siguiente ejemplo: <form name="miFormulario" action="mailto:mi@mail.com" onSubmit="return Valida(this);"> <input type="submit" value="Enviar" name="enviar"> </form> Esta funcin devolver, como ya se ha dicho, true si la validacin es correcta, y false en caso contrario. Para poder realizar la validacin, la funcin debe trabajar sobre los objetos del formulario a validar, para acceder a su valor y evaluarlo. Esto se consigue pasndole como parmetro el objeto this, que referencia en este contexto al formulario desde el que se invoca la funcin. La funcin de validacin acceder a los campos del formulario a partir del objeto this. A continuacin mostramos un ejemplo sencillo, en el que se comprueba si el valor del campo de nombre campo1 es igual a OK. En caso afirmativo, la validacin es correcta: function Valida( formulario ) { if (formulario.campo1.value == 'OK') { return true } else { return false } }

4. Ejemplos
A continuacin mostramos referencias a mltiples ejemplos prcticos de validacin de formularios con JavaScript, que pueden servir para entender mejor los conceptos explicados en los prrafos anteriores:

4.1. Validacion de campos de texto no vacios

El ejemplo de Validacion de campos de texto no vacios muestra cmo acceder a un campo de texto para recorrerlo carcter a carter verificando que no est vaco y que no contiene slo caracteres en blanco.

4.2. Validacin de campos de fecha

El script de Validacion de campo fecha es un ejemplo de validacin de un campo que tiene que ajustarse a un formato determinado (en este caso el formato fecha d-m-aaaa).

4.3. Validacin de campos de hora

El script de Validacin de campos de hora tiene la particularidad de utilizar en la validacin expresiones regulares, lo que simplifica enormemente el cdigo.

4.4. Validacin de campos de longitud fija

Una de las comprobaciones tpicas sobre campos de formulario se refiere al nmero de caracteres introducidos (para verificar que no supera cierto valor, o que es exactamente igual a cierto nmero). Esta comprobacin es til, por ejemplo, para nmeros de telfono, cdigos postales o para nmeros de identificacin (como el DNI). El ejemplo Validacin de campos de longitud fija muestra cmo hacerlo con expresiones regulares.

4.5. Validacin de campos de correo electrnico

La Validacin de campos de correo electrnico es una de las ms necesarias, ya que muchos de los formularios que se utilizan en Internet solicitan este dato. Esta validacin es puramente sintctica (es decir, se comprueba que el formato est de acuerdo con la RFC 821 de la mensajera electrnica de Internet), no siendo posible comprobar que la direccin exista realmente.

4.6. Validacin de campos sin usar expresiones regulares

Para quienes no dominen las expresiones regulares de JavaScript, pero quieran implementar una funcin de validacin a medida, el ejemplo Validacin de campos sin usar expresiones regulares les permitir seleccionar los caracteres vlidos e introducirlos en una variable alfanumrica que se utilizar despus para la validacin.

4.7. Validacin de campo vaco, email y URL

El ejemplo de Validacin de campo vaco, email y URL es otro script de validacin que no utiliza expresiones regulares, y que muestra cmo se realiza la validacin de campos de correo electrnico y de URLs.

Insercin de mltiples scripts en una misma pgina

1. 2. 3. 4. Introduccin Insertando ms de un script Conflictos con nombres de variables o funciones Compartir los manejadores de eventos

1. Introduccin

En teora, no existe ningn lmite al nmero de scripts JavaScript que podemos introducir en una pgina web. El nico lmite a considerar es el tamao de la pgina: a mayor nmero de scripts, mayor ser tambin el nmero de bytes que ocupar la pgina, lo que aumentar el tiempo de descarga. Sin embargo no es difcil encontrarse ante situaciones en las que dos scripts funcionan perfectamente por separado, pero por algn motivo aparentemente misterioso, provocan errores cuando son insertados en una misma pgina. En los prrafos siguientes explicaremos cmo se insertan varios scripts en una misma pgina y cmo podemos hacer para evitar errores de interoperatividad durante la ejecucin de cada uno de ellos.

2. Insertando ms de un script
Como explicamos en el Captulo 1 de nuestro Tutorial de JavaScript, existen dos formas de insertar un script en una pgina web: 1. Copiando el cdigo JavaScript directamente en la pgina HTML, entre las etiquetas <script> y </script>. 2. Indicando el nombre (y la ruta si hace falta) del fichero que contiene el cdigo JavaScript, mediante el parmetro src de la etiqueta <script>: <SCRIPT LANGUAGE="JavaScript" SRC="scripts/fuente.js"></SCRIPT> Teniendo esto en cuenta, podemos poner tantos scripts como queramos, copindolos uno detrs de otro, bien utilizando el primer mtodo (cada uno de ellos entre sus etiquetas <script> y </script>), o el segundo (con tantas lneas <SCRIPT ... SRC=... </SCRIPT> como sea necesario). O bien, con cualquier combinacin de ambos mtodos. Por ejemplo, el siguiente ejemplo muestra cmo se codifica una pgina con 2 sencillos scripts insertados directamente en el cdigo: <HEAD> <TITLE>Introduccin a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//Primer script function hola() { window.alert('Bienvenido a JavaScript') } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-//Segundo script function adios() { window.alert('Hasta la vista')

} //--> </SCRIPT> </HEAD> <BODY onLoad="hola()"> </BODY>

3. Conflictos con nombres de variables o funciones

El ejemplo anterior funcionar sin problemas porque no se produce ningn conflicto entre las variables del script o los nombres de las funciones. Los conflictos se producen cuando dos (o ms) scripts comparten el espacio de nombres para alguna variable o funcin. En estos casos, pueden aparecer errores en tiempo de ejecucin, o bien aunque na haya errores, podemos obtener resultados inesperados. Para entenderlo vamos a modificar el ejemplo anterior para que los 2 scripts utilicen el mismo nombre de funcin: <HEAD> <TITLE>Introduccin a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//Primer script function hola() { window.alert('Bienvenido a JavaScript') } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-//Segundo script function hola() { window.alert('Hasta la vista') } //--> </SCRIPT> </HEAD> <BODY onLoad="hola()"> </BODY> </html> Si ejecutamos este ejemplo veremos como la pgina muestra un mensaje de alerta diferente. Ahora aparece el mensaje Hasta la vista, en vez del mensaje Bienvenido a JavaScript. En este caso, no hay error de ejecucin, pero el resultado no es el esperado (o al menos, es algo confuso). La solucin, en este caso, es muy sencilla: basta con renombrar una de las funciones, para que tenga un nombre diferente.

Los conflictos con los nombres de variables o funciones ms frecuentes (y difciles de detectar) se producen cuando alguno de los objetos de la pgina tiene el mismo nombre que una variable o funcin del cdigo JavaScript. Pongamos de nuevo un ejemplo: <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-//Primer script function escribir( texto ) { window.alert( texto ) } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-//Segundo script function mensaje( texto ) { window.alert( texto ) } //--> </SCRIPT> </head> <body> <form class="buscador" name="miformu"> <input type="text" name="mensaje" value="Este es el mensaje"> <input type="button" value="Funcion 1" onClick="escribir(this.form.mensaje.value)"> <input type="button" value="Funcion 2" onClick="mensaje(this.form.mensaje.value)"> </form> </body> </html> El ejemplo anterior presenta un formulario con un campo de texto y dos botones, como el siguiente.
Este es el men

El primer botn invoca a la funcin escribir() del primer script. La ejecucin es correcta, y aparecer un cuadro de alerta en la ventana del navegador con el mensaje escrito en el cuadro de texto. El segundo botn invoca a la funcin mensaje(). Se produce un error en tiempo de ejecucin, porque el nombre de la funcin coincide con el nombre asignado al cuadro de texto del formulario (para el navegador, por tanto, no es una funcin, sino un objeto). El

mensaje de error (Error: mensaje is not a function) no ayuda mucho si no se sabe cul puede ser el origen del problema.

4. Compartir los manejadores de eventos

Otro problema tpico que surge a la hora de insertar varios scripts en una pgina es el de los manejadores de eventos. El ms comn es el onLoad, que como es sabido, permite asociar una accin al evento de finalizacin de la carga de la pgina. El problema se produce cuando tenemos dos scripts, y cada uno asocia una funcin diferente a este mismo evento. Por ejemplo, podramos tener: <SCRIPT LANGUAGE="JavaScript"> <!-//Primer script function hola() { window.alert('Bienvenido a JavaScript') } window.onload=hola //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-//Segundo script function adios() { window.alert('Hasta la vista') } window.onload=adios //--> </SCRIPT> Si insertamos los 2 scripts en nuestra pgina web, el resultado no ser la ejecucin de las funciones hola() y adios(), por este orden, como quiz esperaramos. Lo que sucede es que se ejecuta nicamente la funcin adios(), porque el intrprete JavaScript de los navegadores se quedar siempre con la ltima asignacin realizada al manejador onLoad. Lo mismo suceder con cualquier otro evento al que se quiera asociar una accin. La solucin en este caso pasa por crear una funcin especfica que invoque a las 2 piezas de cdigo que queramos ejecutar al cargar la pgina: hola() y adios(). El gestor de eventos onload se asociar a esta funcin, y se eliminar la asociacin de los otros scripts. El cdigo necesario podra ser el siguiente: <SCRIPT LANGUAGE="JavaScript"> <!-//Primer script function hola() { window.alert('Bienvenido a JavaScript') }

//--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-//Segundo script function adios() { window.alert('Hasta la vista') } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-function empezar() { hola() adios() } window.onload=empezar //--> </SCRIPT> De esta forma, se ejecutarn ambas funciones, primero hola(), y tras finalizar sta, adios(). Alternativamente, se puede utilizar la forma tradicional de asociar funciones a manejadores de eventos dentro del cdigo HTML. Para el caso que nos ocupa, podramos usar el parmetro onload de la etiqueta body, de la siguiente forma: <BODY ONLOAD="hola(); adios();">