-----

Domingo, 05 de marzo de 2006

Validación de formularios

¿ Cuantos formularios HTML has hecho en tu vida ? La verdad es que yo unos cuantos. Y el problema no es el hacer el formulario, sino luego hacer todo el código para las validaciones, que por lo general es siempre muy parecido, pero en cada caso, con algunas particularidades.

Así que recogiendo algunas de esas particularidades, y teniendo en cuenta que tenía que desarrollar un CMS en PHP, lo que implica infinidad de formularios, decicí crear un código que me valide todos y cada uno de los formularios que haga de aquí en adelante.

Aún no está completo, o por lo menos tan completo cómo en principio pensé hacerlo, pero ya es "usable". Faltan cosas por hacer, pero eso se irá haciendo sobre la marcha, ya que el proyecto que lo requería ya lo tiene integrado, y funciona a las mil maravillas.

Se aceptan comentarios , sugerencias, críticas, bugs encontrados incluso aportaciones de código para mejorarlo (sobre todo esto último )

Para utilizarla, se tiene que cumplir unos requerimientos

1. Tener un sólo formulario en la página
2. El formulario debe tener un botón submit con una llama a la función validar() en el evento onclick
3. Hay que especifcar en las etiquitas, el tipo de campo que tiene que validad y su longitud mediante los siguientes valores
   1. TX-100-nombre: texto, tamaño máximo 100 caracteres
   2. TX-0-nombre: texto sin tamaño máximo
   3. EM-0-nombre: dirección de email
   4. NO-0-nombre. cualquier cosa, no se valida
   5. NU-100-nombre: numérico, tamaño máximo 100 caracteres
   6. Por hacer
   7. HT-0-nombre: UTL
   8. NO-100-nombre no requerido, pero en caso de que exista, tamaño máximo de 100
   9. FC-0-nombre fecha correcta en formato

1. Ampliar las validaciones
2. Hacer todas las validaciones mediante expresiones regulares.
3. Hacer que no se ejecute en el evento onclick del botón, sino en el evento onsubmit del formulario, para que así, en caso de no tener javascript en el cliente, el formulario se envie de igual forma. Habría que hacer la validación en el servidor depués de validad en el cliente.

Cómo podreís imaginar, estas mejoras no las haré hasta que no las necesite, así que si alguien se anima...

Respecto a la mejora del punto 2, no está hecha en este caso porque esta función la utilizao en CMS, que requieren una características por parte del cliente.

/* validación de formularios*/ /********************************************************************************************************************** Comprueba si el texto es un email correcot **********************************************************************************************************************/ function validarEmail(valor) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(valor)){ return (true) } else { return (false); } } /********************************************************************************************************************** Mira si el dato pasado está vacio **********************************************************************************************************************/ function vacio(valor){ if (valor==""){ return true; }else{ return false; } } /********************************************************************************************************************** Comprueba que el tamaño es el correcto **********************************************************************************************************************/ function validarTamano (valor,tamano){ if (parseInt (tamano)==0){ return true; } else{ if (valor.length>tamano){ return false; }else { return true; } } } /********************************************************************************************************************** Comprueba que el valor es un número **********************************************************************************************************************/ function validarEntero(valor){ //intento convertir a entero. //si era un entero no le afecta, si no lo era lo intenta convertir valor = parseInt(valor) //Compruebo si es un valor numérico if (isNaN(valor)) { //entonces (no es un numero) devuelvo el valor cadena vacia return false; }else{ //En caso contrario (Si era un número) devuelvo el valor return true; } } /********************************************************************************************************************** Validación del formulario. Devuelve un sms con los erroes y cambie el estilo de las cajas erroneas. Si está bien, pone los nombre de formulario sin las claves para la comprobación y las envía. No valida ni hidden ni file NOMBRES CLAVE TX-100-nombre texto, tamaño máximo 100 caracteres TX-0-nombre texto sin tamaño máximo EM-0-nombre dirección de email NO-0-nombre cualquier cosa, no se valida NU-100-nombre numérico, tamaño máximo 100 caracteres por hacer HT-0-nombre URL NO-100-nombre no requerido, pero en caso de que exista, tamaño máximo de 100 FC-0-nombre fecha correcta en formato **********************************************************************************************************************/ function validar(){ var error; error=""; var mensaje; mensaje = ""; elementos = document.getElementsByTagName ("input"); for (i=0;i<elementos.length;i++){ if (elementos[i].type!="button"){ elementos[i].className=""; } } for (j=0;j<window.document.forms[0].elements.length;j++){ //obtenemos el elemento actual actual=window.document.forms[0].elements[j]; //los controles file y hidden no los comprobamos if ((window.document.forms[0].elements[j].type!="file") && (window.document.forms[0].elements[j].type!="hidden")){ //comenzamos las comprobaciones //metemos en un array de 3 posiciones los siguientes datas // 1.- tipo de dato // 2.- longitud // 3.- nombre datos = actual.name.split ("-"); valor = actual.value; //SOLO COMPROBAMOS LOS QUE TENGAS ESTAS CLAVES if ((datos[0]=="TX")||(datos[0]=="EM")||(datos[0]=="NO")||(datos[0]=="NU")||(datos[0]=="HT")||(datos[0]=="FC")){ //vamos comprobando los datos introducidos por el usuario if (datos[0]!="NO") { //los campos NO, pueden estar vacios //miramos si el campo introducido es numérico if (datos[0]=="NU") { if (!validarEntero (valor)){ mensaje = mensaje + "\nEl campo " + datos[2] + " debe ser numérico"; actual.className="formularioError"; } } //miramos si es una dirección de correo electrónico correcta if (datos[0]=="EM") { if (!validarEmail (valor)){ mensaje = mensaje + "\nEl correo electrónico parece no ser correcto"; actual.className="formularioError"; } } //miramos si el tamaño se coresponde con el indicado if (!validarTamano(valor,datos[1])){ mensaje = mensaje + "\nEl campo " + datos[2] + " no puede tener más de " + datos[1] + " caracteres "; actual.className="formularioError"; } //miramos si está vacio if (vacio(valor)){ mensaje = mensaje + "\nEl campo " + datos[2] + " no puede estar vacio "; actual.className="formularioError"; } } } } } if (mensaje!=""){ alert (mensaje); }else{ //ponemos a los campos dle formulario el nombre correcto for (j=0;j<window.document.forms[0].elements.length;j++){ actual=window.document.forms[0].elements[j]; //los controles file y hidden no los comprobamos if ((window.document.forms[0].elements[j].type!="file") && (window.document.forms[0].elements[j].type!="hidden")){ datos = actual.name.split ("-"); if (datos[0]!=actual.name){ actual.name=datos[2]; } } } window.document.forms[0].submit(); } } /* fin validación formularios */

Por: txamu | Diseño Web | Comentarios (7) | Referencias (0)