tierra de nómadas - Validación de formularios mediante JavaScript

La validación de formularios es a los manuales de JavaScript lo que los problemas de trenes para los de matemáticas o los de proyectiles para los de física. Inevitables, pero ¿realmente útiles?. Dejemos a los pedagogos la misión de seguir chocando trenes o bombardeando posiciones, y centrémonos en la idoneidad y eficacia de los primeros.

De todas las posibles combinaciones de JavaScript y formularios la validación es, probablemente, la única técnica realmente seria. Aun así, su aplicación no exime de una ulterior comprobación en el lado del servidor, fundamentalmente por dos razones. En primer lugar porque el funcionamiento de un script en el lado del cliente depende de factores incontrolables. Y en segundo lugar, porque es posible que otro documento del cual desconocemos su existencia esté utilizando un formulario con el mismo atributo action que el nuestro, ya sea con benignas o aviesas intenciones.

Planteamos por tanto la validación en el lado del cliente como un recurso para evitar peticiones innecesarias al servidor. En esencia podemos optar por dos "políticas" diferentes. Comprobar "campo por campo" o chequear todo el formulario de una vez. El primer caso incluiría elementos input como éste:

<input type="text" name="Precio" onblur="if (! isNaN(this.value)) alert('El valor debe ser numérico.');"/>

Algo que, al margen de pecar de paranoico, se hace muy incomodo en la mayoría de las ocasiones, tanto para el usuario como para el desarrollador. Además, esas comprobaciones no evitan, por sí solas, el envío de los datos. La segunda opción si lo hace, y consiste en ejecutar una única función antes de enviar el formulario, a través del atributo onsubmit:

<form action="procesador.cgi" method="post" onsubmit="return Chequear(this);">...

La función ejecutada deberá revisar los datos introducidos y devolver true si son correctos. De lo contrario el envío del formulario se anula. Dicha revisión puede ser más o menos específica, aunque siempre podemos usar funciones "reutilizables", que nos sirvan en más ocasiones, como por ejemplo las siguientes, que chequean, respectivamente, si un dato se ha cumplimentado, si es un valor numérico o si se trata de una fecha válida:

function tieneDatos(Valor) { for (var i=0; i<Valor.length; i++) { if ((" \t\n\r").indexOf(Valor.charAt(i))==-1) return true; } return false; } function esNumerico(Valor) { return (isNaN(Valor)); } function esFecha(Valor) { if (!tieneDatos(Valor)) return true; var DatosFecha = Valor.split('/'); var Fecha = new Date(); Fecha.setFullYear(DatosFecha[2],DatosFecha[1]-1,DatosFecha[0]); return (Fecha.getMonth()==DatosFecha[1]-1); }

La idea de "independizar" el proceso de validación del formulario en sí es interesante, puede ahorrarnos mucho tiempo y evitar errores. Para ello podemos hacer uso del atributo class, vinculado normalmente al ámbito de las hojas de estilo. Por ejemplo, el siguiente campo ha sido marcado con una clase que nos puede indicar, de cara a una posible validación, que el dato es obligatorio y que además debe responder a una fecha:

<label for="FechaNacimiento">Fecha de nacimiento: </label> <input type="text" name="FechaNacimiento" class="Requerido Fecha"/>

El modo de ejecutar la comprobación y el método para avisar al usuario de los errores depende en gran medida de nuestras necesidades. El ejemplo siguiente utiliza DOM para recorrer los elementos del formulario, analizar el valor de cada uno en función de su atributo class, enfatizar su elemento label asociado si el valor es incorrecto, y aprovechar el texto de este último para ir conformando un mensaje de información. Para no alargar el fragmento más de la cuenta, el código de ejemplo sólo incluye una comprobación:

tierra de nómadas - recortes

Validación de formularios mediante JavaScript