bach

Validación de campos de formulario con JavaScript
1. Introducción
2. Evento onSubmit
3. El objeto this
4. 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 paraobtener 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 sehan 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 connumerosos 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 tipoespecial 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 lainvocació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 unmecanismo 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óndel 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:
Principio del formulario
Final del formulario
El código JavaScript que se ejecuta antes del envíodel 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...