Validación de un formulario mediante JavaScript

Autor: S3rGy0 | Archivado en: ASP el día 15/Jun/2005

Una de las novedades que ha introducido ASP.NET con respecto a ASP 3.0 ha sido los controles de validación de los controles de un formulario. A mi particularmente no me gustan nada, ya que me parece que son muy poco flexibles y bastante feos. Por ejemplo, tienes que crear chorrocientos mil controles, uno para cada input ó select y terminas con la vista de diseño petada.

Yo lo que hago es utilizar una función javascript que valide los controles de forma personalizada. Esto a priori puede parecer más costoso que arrastrar los Validators en la vista de diseño, pero en realidad sólo tienes que escribir el código la primera vez, el resto es prácticamente copiar y pegar.

La única complicación que tiene esto (por llamarlo de alguna forma ;)) es parar la ejecución de la aplicación cuando se encuentre un error y que no llegue a ejecutarse la parte servidora. para ello debemos llamar a la función en el onclick del control de esta manera:

<input id=cmdGuardar type=button runat=server onclick=”if(!validarDatos()) return;”>

De esta forma si se recibe un false no continúa la ejecución de la página en el servidor.

A continuación hay que crear la función jscript. Aquí os pongo una de ejemplo:

function validarDatos()
{
var resultado=true;
var errores=”";

Form1.imgTitulo.style.visibility=”hidden”;

//Campos obligatorios

if(document.getElementById(”txtTitulo”).value==”")
{
errores=errores+”n - Debe introducir el Título.”;
Form1.imgTitulo.style.visibility=”visible”;
resultado=false;
}

if(resultado==false)
{
errores=”Se han encontrado los siguientes errores: n” + errores;
alert(errores);
}

return resultado;
}

El funcionamiento es el siguiente: Se declaran dos variables donde se va a ir almacenando el resultado de la validación (true ó false) y la descripción de los errores (para no madar un alert por cada error, sino que se manda uno solo). La siguiente sentencia es opcional. Lo que hace es ocultar al inicio de la validación una imagen que irá a la derecha de cada control; se trata de un gif animado con una señal de admiración que parpadea, para indicar al usuario dónde se ha producido el error. Es opcional, si no queréis usarla, pues omitar las líneas que hagan referencia a este control.

Seguidamente se valida el control. En el ejemplo se comprueba que se haya introducido algo en él, ya que se trata de un control obligatorio. En el caso de encontrarse un error se concatena el error a los posibles errores previos, se muestra el gif que parpadea y se pone como resultado false.

Por último, si el resultado es negativo, se muestra el error y se devuelve el resultado de la validación.

Como veis es lo más simple del mundo y sin embargo permite una mayor flexibilidad a la hora de validad todo tipo de datos. Por supuesto seguro que habrá muchos que sigan prefiriendo los Validators, pero aquí tenéis una alternativa.

S3rGy0.

---

Posts Relacionados

• Mandar un Formulario con un Enlace
• isArray en javascript sin instanceof
• Nuevo PHP-NUKE 7.5
• HTML Validator - Potente extensión de firefox para validación html