Validacion de campos con javascript taller diversificado

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 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:

<form name="miFormulario" action="mailto:mi@mail.com">
<input type="submit" value="Enviar" name="enviar">
</form>

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:

<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 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:

<form name="miFormulario" action="mailto:mi@mail.com"
onSubmit="return Valida(this);">
<input type="submit" value="Enviar" name="enviar">
</form>

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.