Validación de campos de formulario con JavaScript

Validación de campos de formulario con JavaScript 1. 2. 3. 4.

Introducción Evento onSubmit El objeto this Ejemplos

1. Introducción Una de las grandes aportaciones de JavaScript a la creación 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 validación de los datos de un formulario mediante scripts JavaScript no sustituye a la validación que debe realizarse, por motivos de seguridad, en la aplicación del servidor que recibe la información. Sin embargo, al añadir una validación local con JavaScript, la experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener sólo un mensaje informando de la incorrección de la información suministrada. Resulta frustrante cumplimentar un formulario, pulsar el botón 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 típicas:    

Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, teléfonos, etc.) Comprobar la validez (sintáctica) de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la entrada

La siguiente guía ayuda a entender el funcionamiento de la validación de formularios con JavaScript, y enlaza con numerosos ejemplos de nuestra sección de código que pueden ser utilizados de modelo para crear la validación deseada.

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

Cuando el usuario pulsa sobre el botón, el navegador ejecuta la acción codificada en el parámetro action del formulario. En el ejemplo anterior, hemos incluido una acción de tipo mailto:, es decir, de envío de datos por correo electrónico. Lo normal es que la acción sea la invocación de un programa que se ejecuta en el servidor remoto, y que recibe los datos de acuerdo a la especificación CGI (Common Gateway Interface). Para ampliar la información sobre esta interfaz, consulta nuestro tutorial ¿Pero qué es eso de los CGIs? Cuando el usuario pulsa sobre el botón de enviar, se genera el evento submit, asociado al envío 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 envío 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 escribiríamos:

En esta nueva versión del formulario, al pulsar sobre el botón de envío se ejecutará el código incluido como valor del atributo onSubmit. En este caso, se trata de un simple alert() JavaScript informando de que se ha pulsado sobre el botón de envío. Puede comprobarse el funcionamiento pulsando sobre el siguiente botón: El código JavaScript que se ejecuta antes del envío del formulario es, en el ejemplo anterior, un alert(). Sin embargo, se puede observar que se ha añadido un return false al final de la línea de código. Esta es la forma de indicar al navegador si la validación ha sido correcta o incorrecta. Si el código JavaScript (normalmente una función de validación) del atributo onSubmit devuelve false, la validación es incorrecta y el navegador no continúa con el envío del formulario tras ejecutar dicho código. Por el contrario, si devuelve true la validación es correcta y el formulario se envía 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 envío de un mensaje de correo a la dirección suministrada como mailto: en el atributo action.

3. El objeto this

Normalmente, el evento onSubmit ejecuta una función de validación, como en el siguiente ejemplo:

Esta función devolverá, como ya se ha dicho, true si la validación es correcta, y false en caso contrario. Para poder realizar la validación, la función debe trabajar sobre los objetos del formulario a validar, para acceder a su valor y evaluarlo. Esto se consigue pasándole como parámetro el objeto this, que referencia en este contexto al formulario desde el que se invoca la función. La función de validación accederá a los campos del formulario a partir del objeto this. A continuación 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 validación es correcta: function Valida( formulario ) { if (formulario.campo1.value == 'OK') { return true } else { return false } }

4. Ejemplos A continuación mostramos referencias a múltiples ejemplos prácticos de validación de formularios con JavaScript, que pueden servir para entender mejor los conceptos explicados en los párrafos anteriores:

4.1. Validacion de campos de texto no vacios El ejemplo de Validacion de campos de texto no vacios muestra cómo acceder a un campo de texto para recorrerlo carácter a caráter verificando que no está vacío y que no contiene sólo caracteres en blanco.

4.2. Validación de campos de fecha El script de Validacion de campo fecha es un ejemplo de validación de un campo que tiene que ajustarse a un formato determinado (en este caso el formato fecha d-m-aaaa).

4.3. Validación de campos de hora

El script de Validación de campos de hora tiene la particularidad de utilizar en la validación expresiones regulares, lo que simplifica enormemente el código.

4.4. Validación de campos de longitud fija Una de las comprobaciones típicas sobre campos de formulario se refiere al número de caracteres introducidos (para verificar que no supera cierto valor, o que es exactamente igual a cierto número). Esta comprobación es útil, por ejemplo, para números de teléfono, códigos postales o para números de identificación (como el DNI). El ejemplo Validación de campos de longitud fija muestra cómo hacerlo con expresiones regulares.

4.5. Validación de campos de correo electrónico La Validación de campos de correo electrónico es una de las más necesarias, ya que muchos de los formularios que se utilizan en Internet solicitan este dato. Esta validación es puramente sintáctica (es decir, se comprueba que el formato está de acuerdo con la RFC 821 de la mensajería electrónica de Internet), no siendo posible comprobar que la dirección exista realmente.

4.6. Validación de campos sin usar expresiones regulares Para quienes no dominen las expresiones regulares de JavaScript, pero quieran implementar una función de validación a medida, el ejemplo Validación de campos sin usar expresiones regulares les permitirá seleccionar los caracteres válidos e introducirlos en una variable alfanumérica que se utilizará después para la validación.

4.7. Validación de campo vacío, email y URL El ejemplo de Validación de campo vacío, email y URL es otro script de validación que no utiliza expresiones regulares, y que muestra cómo se realiza la validación de campos de correo electrónico y de URLs.

Inserción de múltiples scripts en una misma página 1. 2. 3. 4.

Introducción Insertando más de un script Conflictos con nombres de variables o funciones Compartir los manejadores de eventos

1. Introducción

En teoría, no existe ningún límite al número de scripts JavaScript que podemos introducir en una página web. El único límite a considerar es el tamaño de la página: a mayor número de scripts, mayor será también el número de bytes que ocupará la página, lo que aumentará el tiempo de descarga. Sin embargo no es difícil encontrarse ante situaciones en las que dos scripts funcionan perfectamente por separado, pero por algún motivo aparentemente misterioso, provocan errores cuando son insertados en una misma página. En los párrafos siguientes explicaremos cómo se insertan varios scripts en una misma página y cómo podemos hacer para evitar errores de interoperatividad durante la ejecución de cada uno de ellos.

2. Insertando más de un script Como explicamos en el Capítulo 1 de nuestro Tutorial de JavaScript, existen dos formas de insertar un script en una página web: 1. Copiando el código JavaScript directamente en la página HTML, entre las etiquetas <script> y . 2. Indicando el nombre (y la ruta si hace falta) del fichero que contiene el código JavaScript, mediante el parámetro src de la etiqueta <script>: <SCRIPT LANGUAGE="JavaScript" SRC="scripts/fuente.js"> Teniendo esto en cuenta, podemos poner tantos scripts como queramos, copiándolos uno detrás de otro, bien utilizando el primer método (cada uno de ellos entre sus etiquetas <script> y ), o el segundo (con tantas líneas <SCRIPT ... SRC=... como sea necesario). O bien, con cualquier combinación de ambos métodos. Por ejemplo, el siguiente ejemplo muestra cómo se codifica una página con 2 sencillos scripts insertados directamente en el código: <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript">
} //-->

3. Conflictos con nombres de variables o funciones El ejemplo anterior funcionará sin problemas porque no se produce ningún conflicto entre las variables del script o los nombres de las funciones. Los conflictos se producen cuando dos (o más) scripts comparten el espacio de nombres para alguna variable o función. En estos casos, pueden aparecer errores en tiempo de ejecución, 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 función: <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript"> Si ejecutamos este ejemplo veremos como la página 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 ejecución, pero el resultado no es el esperado (o al menos, es algo confuso). La solución, 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 más frecuentes (y difíciles de detectar) se producen cuando alguno de los objetos de la página tiene el mismo nombre que una variable o función del código JavaScript. Pongamos de nuevo un ejemplo: <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript">

El ejemplo anterior presenta un formulario con un campo de texto y dos botones, como el siguiente. Este es el men

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

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

4. Compartir los manejadores de eventos Otro problema típico que surge a la hora de insertar varios scripts en una página es el de los manejadores de eventos. El más común es el onLoad, que como es sabido, permite asociar una acción al evento de finalización de la carga de la página. El problema se produce cuando tenemos dos scripts, y cada uno asocia una función diferente a este mismo evento. Por ejemplo, podríamos tener: <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript"> Si insertamos los 2 scripts en nuestra página web, el resultado no será la ejecución de las funciones hola() y adios(), por este orden, como quizá esperaríamos. Lo que sucede es que se ejecuta únicamente la función adios(), porque el intérprete JavaScript de los navegadores se quedará siempre con la última asignación realizada al manejador onLoad. Lo mismo sucederá con cualquier otro evento al que se quiera asociar una acción. La solución en este caso pasa por crear una función específica que invoque a las 2 piezas de código que queríamos ejecutar al cargar la página: hola() y adios(). El gestor de eventos onload se asociará a esta función, y se eliminará la asociación de los otros scripts. El código necesario podría ser el siguiente: <SCRIPT LANGUAGE="JavaScript">
//--> <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript"> De esta forma, se ejecutarán 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 código HTML. Para el caso que nos ocupa, podríamos usar el parámetro onload de la etiqueta body, de la siguiente forma: