El problema

EstiloCSS.com mantiene una selección de tutoriales web bien escritos en español. Si bien es cierto el sitio tan sólo está empezando por ahora, he recibido una inmensa respuesta positiva de la comunidad de desarrolladores y diseñadores en Latinoamérica.

EstiloCSS.com es un proyecto personal. La verdad siempre quise crear una comunidad de desarrolladores y diseñadores en Colombia con el fin de compartir experiencias y conocimientos. Para el sitio web tengo grandes proyectos. Lo que está ahora en línea realmente no representa ni la punta del Iceberg. Quiero con el tiempo integrar una especie de foro para que la comunidad pueda ayudar a cualquier visitante que llegue al sitio web con alguna duda.

También quiero agregar mucha más funcionalidad al sitio web, incluyendo pero no limitado a la búsqueda por autores, integración real con la API de Twitter y Facebook entre otras muchas cosas. También es mi deseo habilitar el ingreso al sistema de gestión para que cientos de expertos a lo largo y ancho del país compartan sus experiencias.

La solución

EstiloCSS.com está completamente desarrollado en el Joomla! 1.6 Framework. El sitio hace uso de conceptos avanzados de Joomla! tales y como ajustes de plantilla y diagramación, plugins personalizados así como la creación de campos personalizados para meta-información.

Lo que realmente es interesante es lo fácil que resulta personalizar y extender Joomla! al gusto de uno literalmente logrando que las posibilidades sean infinitas. Para este proyecto, era necesario crear un sistema de comentarios adicional que pudiera integrarse sin problemas con Joomla!. En adición, también modifiqué el sistema de calificación de artículos para hacerlo ver un poco más interesante.

Cabe recalcar que el sitio no hace uso de ningún otro framework (nisiquiera jQuery) con el fin de maximizar la rapidez con la que la aplicación se ejecuta. El sitio únicamente usa una pequeña librería que yo creé para validad formularios en español que está disponible completamente gratis en este, mi sitio web personal. También resulta interesante el hecho de que yo mismo creé el sistema de resaltado de sintaxis para mostrar código en los tutoriales.

Contenido

1. El Problema
2. Características
3. Validación básica paso a paso
4. Creando mensajes de error más específicos junto con efectos visuales
5. Nombres preestablecidos de IBForm
6. Agregando campos personalizados

El problema

Admitámoslo colegas, lidiar con la validación de formularios es una maldición. Por lo menos para mí cuando alguien menciona la palabra formulario siempre pienso en el proceso casi interminable y totalmente fastidioso que implica crear el boceto del formulario, la maquetación en HTML, el diseño en CSS, la validación en javascript, el procesamiento con el lenguaje del servidor y el almacenamiento en una base de datos. Sin duda, la parte más aburrida y más larga del tema es la validación con Javascript. ¡Qué aburrido!

Algunos dirán, pero Iván, si ya hay varios scripts que validan formularios que hacen la vida más fácil. Debo admitir que he probado muchos pero la verdad la mayoría no me gustan debido principalmente a las siguientes razones:

1. Dependencia de librerías externas (como jQuery).
2. Están creados en inglés.
3. La validación está creada con campos anglosajones en mente. Como códigos zip, fechas, nombres, diferentes a los nuestros.
4. Validar un formulario llenado por un colombiano con uno de estos remedios resulta peor que la enfermedad.
5. Capacidad limitada de validación y la más importante,
6. son entrometidos. Automáticamente alteran gráficamente el formulario para indicar campos con errores y generalmente no hay mucha libertad sobre cómo mostrar ese resultado.

Por estas razones, decidí crear mi propio validador de formularios del cual hablaré en la siguiente sección.

La solución

Presento el primer y más completo sistema integrado de validación de formularios en español optimizado para usuarios Colombianos. IBForm es increíblemente sencillo de usar (asumiendo que usted tiene nociones básicas de JavaScript) y lo mejor de todo es que no obstruye su trabajo. Usted como desarrollador tendrá toda la libertad de mostrar el resultado de la validación como desee. Si quiere puede mostrar sólo un “alert” indicándole al visitante los errores cometidos o si desea también puede crear los mejores efectos visuales que le lleguen a la mente. Las posibilidades son ilimitadas.

Características

1. El más completo sistema de validación disponible en español.
2. La manera absolutamente correcta de validar formularios. Asígnele un formulario a IBForm y este le dirá si el formulario es válido. Si no lo es, le retornará un array con el mensaje de error de cada campo así como su ubicación en el documento XML relativo al formulario lo que facilita tremendamente la generación de efectos visuales.
3. Contiene campos preestablecidos. Simplemente nombre los campos de su formulario acorde a la lista y listo.
4. Ligero, no más de 18KB.
5. No hace uso de librerías externas como JQuery. Ideal para los amantes del JavaScript puro.
6. Campos preestablecidos específicos para usuarios Colombianos.
7. Eficiente y rápido proceso de validación.
8. Facilita la población de campos de selección
9. Soporta infinitos formularios por página.
10. No es entrometido. No genera absolutamente ningún efecto gráfico dándole la libertad a usted para validar el formulario a su gusto.

Limitaciones

1. IBForm aún no soporta campos de selección múltiple ni botones radio.

Compatibilidad

Se ha comprobado que IBForm funciona correctamente en cualquier navegador común.

Validación básica paso a paso

Ir al contenido

Supongamos que tenemos el siguiente documento XHTML. En él se encuentra un simple formulario de contacto. Note que el campo de selección departamento no tiene actualmente ninguna opción.

Antes que nada, debemos cambiar los nombres de nuestros campos en el formulario por alguno de los nombres preestablecidos de IBForm. El formulario quedaría de esta forma:

Ahora, incluyamos el IBForm en el <head>:

También incluyamos otro archivo .js donde pondremos las instrucciones que le daremos a nuestro IBForm. En este ejemplo, lo llamé validacion.js

Abramos nuestro archivo validacion.js y en él crearemos una función y se la asignaremos al evento onload de nuestro objeto window.

Esa función correrá siempre que abra nuestra página con el formulario. Dentro de esta nueva función, de la misma manera asignémosle una función al evento onsubmit de nuestro formulario.

Ahora, antes que podamos validar nuestro formulario es importante cancelar el comportamiento por defecto del navegador el cual es enviar el formulario a POST. Si no lo hacemos, el formulario siempre se enviará antes de ser validado.

En un mundo ideal donde todos los navegadores se comportaran igual simplemente tendríamos que agregar un argumento a la última función que acabamos de crear y dentro de esta cancelar el evento por defecto, como lo sugiere el siguiente código:

Lamentablemente como no vivimos en un mundo ideal, gracias como siempre a Internet Explorer que no soporta preventDefault, debemos hacer eso un poquito más complicado a través de un simple verificador de navegador. La línea 7 del código anterior la cambiamos por:

Lo que nos proporcionaría:

Acabamos de hacer lo más complicado de todo el proceso que es simplemente prevenir el comportamiento por defecto en los distintos navegadores.

Crearemos ahora un objeto de clase IBForm al cual le asignaremos a su constructor nuestro formulario como parámetro (lo sé, no existen clases en JavaScript). Este procedimiento lo realizaremos inmediatamente antes de la función que acabamos de modificar. Al hacer esto, IBForm automáticamente poblará nuestra lista de selección de departamentos Colombianos.

Crearemos ahora justo después de nuestró código que previene el evento por defecto de nuestro formulario un array donde almacenaremos todos los problemas que encuentre IBForm.

Para poblar nuestro array recién creado, le asignaremos el valor de retorno del evento validate() del IBForm.

El evento validate() de nuestro formulario lo que hace es devolvernos un array de dos dimensiones con los errores encontrados en el momento de la validación de nuestro formulario.

Ahora sí, procedamos a darle vida a nuestro array:

Para mostrar un mensaje de error, tiene sentido que si el arreglo que acabamos de llenar está vacío querrá decir que no hubo ningún error en el proceso de validación y que el formulario es completamente válido. Podemos mostrar un mensaje adecuado con una simple condición:

Creando mensajes de error más específicos junto con efectos visuales

Ir al contenido

El arreglo que devuelve el evento validate() de IBForm tiene la siguiente estructura:

arreglo[número_de_iteración][0]

Que devuelve la posición del elemento (número del nodo xml) con el problema relativa al formulario.

arreglo[número_de_iteración][1]

Que devuelve el mensaje de error por defecto en español.

Ahora lo que haremos es crear un mensaje mostrando un error más específico. Es decir, que no sólo diga “El formulario tiene errores ” sino que muestre exactamente cuáles son los campos con errores de validación.

Para lograr esto, es necesario crear un bucle para examinar cada iteración de nuestro formulario e ir llenando nuestro mensaje poco a poco con cada texto de error que está almacenado en nuestro arreglo.

Para agregar un simple efecto, podemos simplemente asignarle un borde rojo a cada uno de los campos con error en el momento de validación.

La posibilidad de crear efectos visuales es completamente ilimitada. Aquí pueden ver un ejemplo un poco más avanzado.

Nombres preestablecidos de IBForm

Ir al contenido

IBForm está preparado para validar la mayor parte de formularios. A continuación ud. verá un listado de los campos preestablecidos para facilitar el proceso de validación.

* La última columna define si IBForm trata el campo como requerido.

Nombre del campo	Ejemplo	Validación	Mensaje de error	R?*
interesado_pNombre	<input type="text" name="interesado_pNombre" id="interesado_pNombre"/>	Únicamente permite el ingreso de un nombre. Ejemplo: “Iván”	Por favor ingrese su nombre	Sí
interesado_pApellido	<input type="text" name="interesado_pApellido" id="interesado_pApellido"/>	Similar al anterior, sólo permite el ingreso de un apellido. Ejemplo: “Bustos”	Por favor ingrese su apellido	Sí
interesado_pNombre_pApellido	<input type="text" name="interesado_pNombre_pApellido" id="interesado_pNombre_pApellido"/>	Permite el ingreso de un nombre y un apellido. Ejemplo: “Iván Bustos”	Por favor ingrese su primer nombre y su primer apellido separados por un espacio.	Sí
interesado_nombreCompleto	<input type="text" name="interesado_nombreCompleto" id="interesado_nombreCompleto"/>	Permite el ingreso de hasta 4 nombres y apellidos aceptando como mínimo 2. Ejemplo: “Iván Orlando Bustos”	Por favor ingrese sus nombres y apellidos separados por un espacio.	Sí
interesado_nombres	<input type="text" name="interesado_nombres" id="interesado_nombres"/>	Permite el ingreso de hasta dos nombres. Ejemplo: “Iván Orlando”	Por favor ingrese sus nombres.	Sí
interesado_apellidos	<input type="text" name="interesado_apellidos" id="interesado_apellidos"/>	Permite el ingreso de hasta dos apellidos. Ejemplo: “Bustos Torres”	Por favor ingrese sus apellidos.	Sí
interesado_correoElectronico	<input type="text" name="interesado_correoElectronico" id="interesado_correoElectronico"/>	Basado principalmente en el Formato de Mensajería en Internet documento RCF 5322 que se puede accesar aquí. Permite el ingreso de un correo electrónico. Ejemplo: “ivan.bustos001@misitio.com.co”	Por favor ingrese su correo electrónico	Sí
interesado_sitioWeb	<input type="text" name="interesado_sitioWeb" id="interesado_sitioWeb"/>	Acepta un Localizador Uniforme de Recursos (URL en inglés). Tenga en cuenta que no soporta cadenas de consulta (query strings en inglés). Ejemplos: “http://www.ivanbustos.com/” ,”www.ivanbustos.com”, “www.ivanbustos.com/”, “misubdominio.ivanbustos.com”, “ivanbustos.com”. Nota: El mensaje de error sólo aparecerá si el usuario intenta llenar este campo.	Ingrese su sitio web correctamente.	No
interesado_comentario	<textarea cols="30" rows="10" name="interesado_comentario" id="interesado_comentario"/></textarea>	Acepta un comentario sin límite de caracteres. Soporta únicamente caracteres en español.	Error: su comentario puede que esté vacío, esté muy largo o que contenga caracteres no permitidos.	Sí
interesado_nombreDeUsuario	<input type="text" name="interesado_sitioWeb" id="interesado_sitioWeb" maxlength="7" />	Acepta una combinación sin espacios de las letras del alfabeto anglosajón en mayúsculas o minúsculas junto con los números enteros del 0 al 9. Ejemplo: “vAncho17″	Ingrese correctamente su nombre de usuario.	Sí
interesado_contrasena1	<input type="password" name="interesado_contrasena1" id="interesado_contrasena1" maxlength="7" />	Acepta cualquier combinación de caracteres exceptuando espacios.	Ingrese correctamente su contraseña.	Sí
interesado_contrasena2	<input type="password" name="interesado_contrasena2" id="interesado_contrasena2" maxlength="7" />	Mostrará error si y sólo si el valor del campo interesado_contrasena1 no es igual a interesado_contrasena2. Acepta cualquier combinación de caracteres exceptuando espacios.	Ambas contraseñas deben ser iguales. Por favor revise.	Sí
interesado_cedula	<input type="text" name="interesado_cedula" id="interesado_cedula"/>	Basada en la cédula de ciudadanía Colombiana, acepta el ingreso de hasta nueve números consecutivos del 0 al 9.	Ingrese correctamente su cédula de ciudadanía sin usar puntos.	Sí
interesado_fechaDeNacimiento	<input type="text" name="interesado_fechaDeNacimiento" id="interesado_fechaDeNacimiento"/>	Basado en el formato de fechas comunmente usado por hispanohablantes (Día/Mes/Año). Ejemplo: “01/10/2004″, “31/02/2010″. Nota: Recomiendo usar un calendario en javascript para evitar que el usuario ingrese manualmente la fecha.	Ingrese correctamente su fecha de nacimiento por favor.	Sí
interesado_telefono	<input type="text" name="interesado_telefono" id="interesado_telefono"/>	Acepta los Formatos colombianos para celulares, teléfonos fijos junto con su indicativo departamental. Ejemplos: “+1 314 213 21 45″, “+13142132145″, “2744239″	Ingrese correctamente su teléfono por favor.	Sí
interesado_sexo	<select name="interesado_sexo" id="interesado_sexo"></select>	IBForm automáticamente poblará el campo de selección. Basado en el estándar ISO 5218:1977 Information interchange — Representation of human sexes disponible aquí, asignará a masculino un valor de 1, y femenino un valor de 2.	Seleccione por favor un sexo.	Sí
casa_direccion1	<input type="text" name="casa_direccion1" id="casa_direccion1" maxlength="50" />	Acepta una combinación de caracteres hispanos y espacios.	Ingrese correctamente la dirección de su lugar de residencia por favor.	Sí
casa_direccion2	<input type="text" name="casa_direccion2" id="casa_direccion2" maxlength="30" />	Acepta una combinación de caracteres hispanos y espacios. Usar para segundas líneas en direcciones. Generalmente para indicar el número de apartamento o suite. En Colombia por el momento no es necesario.	La segunda línea de la dirección de su lugar de residencia tiene caracteres inválidos. Revise por favor.	No
casa_direccionEstandar	<input type="text" name="casa_direccionEstandar" id="casa_direccionEstandar" />	No recomiendo su uso con fines comerciales ya que es algo puramente experimental. Basado en el Estándar de las Direcciones Urbanas para los Equipamientos del Sector Educativo del Instituto Geográfico Agustín Codazzi y el Ministerio de Educación Colombiano. Ver detalles de la nomenclatura en este documento pdf. Ejemplos: “KR 110 A 86 B 28 MZ 19″, “AV CARACAS 13 15″, “BR LAS ACACIAS MZ D LO 9″	Por favor ingrese la dirección de su lugar de residencia según el formato del Instituto Geográfico Agustín Codazzi.	Sí
casa_localidad	<input type="text" name="casa_localidad" id="casa_localidad" />	Creado para validar el nombre de una ciudad, un pueblo o similares.	Ingrese el nombre de la localidad de su lugar de residencia (ciudad, pueblo, municipio) por favor.	Sí
casa_codigoPostal	<input type="text" name="casa_codigoPostal" id="casa_codigoPostal" />	Valida 6 números consecutivos que forman el nuevo código postal Colombiano. Consulte su código postal en el sitio web de la Red Postal de Colombia 4-72. Ejemplo: “110931″.	Ingrese el Código Postal Colombiano de su lugar de residencia por favor.	Sí
casa_telefono	<input type="text" name="casa_telefono" id="casa_telefono"/>	Acepta los Formatos colombianos para celulares, teléfonos fijos junto con su indicativo departamental. Ejemplos: “+1 314 213 21 45″, “+13142132145″, “2744239″	Ingrese correctamente el teléfono de su lugar de residencia por favor.	Sí
casa_departamento	<select name="casa_departamento" id="casa_departamento"></select>	IBForm automaticamente poblará el campo de selección de la siguiente manera: <option value="amazonas">Amazonas</option> <option value="antioquia">Antioquia</option> <option value="arauca">Arauca</option> <option value="atlantico">Atlántico</option> <option value="bolivar">Bolívar</option> <option value="boyaca">Boyacá</option> <option value="caldas">Caldas</option> <option value="caqueta">Caquetá</option> <option value="casanare">Casanare</option> <option value="cauca">Cauca</option> <option value="cesar">Cesar</option> <option value="choco">Chocó</option> <option value="cordoba">Córdoba</option> <option value="cundinamarca">Cundinamarca</option> <option value="guainia">Guainía</option> <option value="guaviare">Guaviare</option> <option value="huila">Huila</option> <option value="guajira">La Guajira</option> <option value="magdalena">Magdalena</option> <option value="meta">Meta</option> <option value="narino">Nariño</option> <option value="nortesantander">Norte de Santander</option> <option value="putumayo">Putumayo</option> <option value="quindio">Quindío</option> <option value="risaralda">Risaralda</option> <option value="sanandres">San Andrés y Providencia</option> <option value="santander">Santander</option> <option value="sucre">Sucre</option> <option value="tolima">Tolima</option> <option value="valle">Valle del Cauca</option> <option value="vaupes">Vaupés</option> <option value="vichada">Vichada</option>	Seleccione por favor el departamento donde se encuentra ubicado su lugar de residencia.	Sí
trabajo_direccion1	<input type="text" name="trabajo_direccion1" id="trabajo_direccion1" maxlength="50" />	Acepta una combinación de caracteres hispanos y espacios.	Ingrese correctamente la dirección de su sitio de trabajo por favor.	No
trabajo_direccion2	<input type="text" name="trabajo_direccion2" id="trabajo_direccion2" maxlength="30" />	Acepta una combinación de caracteres hispanos y espacios. Usar para segundas líneas en direcciones. Generalmente para indicar el número de apartamento o suite. En Colombia por el momento no es necesario.	La segunda línea de la dirección de su sitio de trabajo tiene caracteres inválidos. Revise por favor.	No
trabajo_direccionEstandar	<input type="text" name="trabajo_direccionEstandar" id="trabajo_direccionEstandar" />	No recomiendo su uso con fines comerciales ya que es algo puramente experimental. Basado en el Estándar de las Direcciones Urbanas para los Equipamientos del Sector Educativo del Instituto Geográfico Agustín Codazzi y el Ministerio de Educación Colombiano. Ver detalles de la nomenclatura en este documento pdf. Ejemplos: “KR 110 A 86 B 28 MZ 19″, “AV CARACAS 13 15″, “BR LAS ACACIAS MZ D LO 9″	Por favor ingrese la dirección de su sitio de trabajo según el formato del Instituto Geográfico Agustín Codazzi.	No
trabajo_localidad	<input type="text" name="trabajo_localidad" id="trabajo_localidad" />	Creado para validar el nombre de una ciudad, un pueblo o similares.	Ingrese el nombre de la localidad de su sitio de trabajo (ciudad, pueblo, municipio) por favor.	No
trabajo_codigoPostal	<input type="text" name="trabajo_codigoPostal" id="trabajo_codigoPostal" />	Valida 6 números consecutivos que forman el nuevo código postal Colombiano. Consulte su código postal en el sitio web de la Red Postal de Colombia 4-72. Ejemplo: “110931″.	Ingrese el Código Postal Colombiano de su sitio de trabajo por favor.	No
trabajo_telefono	<input type="text" name="trabajo_telefono" id="trabajo_telefono"/>	Acepta los Formatos colombianos para celulares, teléfonos fijos junto con su indicativo departamental. Ejemplos: “+1 314 213 21 45″, “+13142132145″, “2744239″	Ingrese correctamente el teléfono de su sitio de trabajo por favor.	No
trabajo_departamento	<select name="trabajo_departamento" id="trabajo_departamento"></select>	IBForm automaticamente poblará el campo de selección de la misma manera en que lo hace casa_departamento.	Seleccione por favor el departamento donde se encuentra ubicado su sitio de trabajo	Sí
envio_direccion1	<input type="text" name="envio_direccion1" id="trabajo_direccion1" maxlength="50" />	Acepta una combinación de caracteres hispanos y espacios.	Ingrese correctamente la dirección de envío correctamente por favor.	Sí
envio_direccion2	<input type="text" name="envio_direccion2" id="envio_direccion2" maxlength="30" />	Acepta una combinación de caracteres hispanos y espacios. Usar para segundas líneas en direcciones. Generalmente para indicar el número de apartamento o suite. En Colombia por el momento no es necesario.	La segunda línea de la dirección de envío tiene caracteres inválidos. Revise por favor.	No
envio_direccionEstandar	<input type="text" name="envio_direccionEstandar" id="envio_direccionEstandar" />	No recomiendo su uso con fines comerciales ya que es algo puramente experimental. Basado en el Estándar de las Direcciones Urbanas para los Equipamientos del Sector Educativo del Instituto Geográfico Agustín Codazzi y el Ministerio de Educación Colombiano. Ver detalles de la nomenclatura en este documento pdf. Ejemplos: “KR 110 A 86 B 28 MZ 19″, “AV CARACAS 13 15″, “BR LAS ACACIAS MZ D LO 9″	Por favor ingrese la dirección de envío según el formato del Instituto Geográfico Agustín Codazzi.	Sí
envio_localidad	<input type="text" name="envio_localidad" id="envio_localidad" />	Creado para validar el nombre de una ciudad, un pueblo o similares.	Ingrese el nombre de la localidad de envío (ciudad, pueblo, municipio) por favor.	Sí
envio_codigoPostal	<input type="text" name="envio_codigoPostal" id="envio_codigoPostal" />	Valida 6 números consecutivos que forman el nuevo código postal Colombiano. Consulte su código postal en el sitio web de la Red Postal de Colombia 4-72. Ejemplo: “110931″.	Ingrese el Código Postal Colombiano del sitio de envío por favor.	Sí
envio_telefono	<input type="text" name="envio_telefono" id="envio_telefono"/>	Acepta los Formatos colombianos para celulares, teléfonos fijos junto con su indicativo departamental. Ejemplos: “+1 314 213 21 45″, “+13142132145″, “2744239″	Ingrese correctamente el teléfono del lugar de envío por favor.	Sí
envio_departamento	<select name="envio_departamento" id="envio_departamento"></select>	IBForm automaticamente poblará el campo de selección de la misma manera en que lo hace casa_departamento.	Seleccione por favor el departamento del sitio de envío.	Sí
pago_direccion1	<input type="text" name="pago_direccion1" id="pago_direccion1" maxlength="50" />	Acepta una combinación de caracteres hispanos y espacios.	Ingrese correctamente la dirección del comprador correctamente por favor.	Sí
pago_direccion2	<input type="text" name="pago_direccion2" id="pago_direccion2" maxlength="30" />	Acepta una combinación de caracteres hispanos y espacios. Usar para segundas líneas en direcciones. Generalmente para indicar el número de apartamento o suite. En Colombia por el momento no es necesario.	La segunda línea de la dirección del comprador tiene caracteres inválidos. Revise por favor.	Sí
pago_direccionEstandar	<input type="text" name="pago_direccionEstandar" id="pago_direccionEstandar" />	No recomiendo su uso con fines comerciales ya que es algo puramente experimental. Basado en el Estándar de las Direcciones Urbanas para los Equipamientos del Sector Educativo del Instituto Geográfico Agustín Codazzi y el Ministerio de Educación Colombiano. Ver detalles de la nomenclatura en este documento pdf. Ejemplos: “KR 110 A 86 B 28 MZ 19″, “AV CARACAS 13 15″, “BR LAS ACACIAS MZ D LO 9″	Por favor ingrese la dirección del comprador según el formato del Instituto Geográfico Agustín Codazzi.	Sí
pago_localidad	<input type="text" name="pago_localidad" id="pago_localidad" />	Creado para validar el nombre de una ciudad, un pueblo o similares.	Ingrese el nombre de la localidad del comprador (ciudad, pueblo, municipio) por favor.	Sí
pago_codigoPostal	<input type="text" name="pago_codigoPostal" id="pago_codigoPostal" />	Valida 6 números consecutivos que forman el nuevo código postal Colombiano. Consulte su código postal en el sitio web de la Red Postal de Colombia 4-72. Ejemplo: “110931″.	Ingrese el Código Postal Colombiano del comprador por favor.	Sí
pago_departamento	<select name="pago_departamento" id="pago_departamento"></select>	IBForm automaticamente poblará el campo de selección de la misma manera en que lo hace casa_departamento.	Seleccione por favor el departamento del comprador.	Sí
tarjeta_numero	<input type="text" name="tarjeta_numero" id="tarjeta_numero" />	Acepta hasta 9 números consecutivos del 1 al 9.	Ingrese correctamente el número de su tarjeta de crédito/débito sin espacios por favor.	Sí
tarjeta_titular	<input type="text" name="tarjeta_titular" id="tarjeta_titular" />	Similar a interesado_nombreCompleto, acepta un nombre completo.	Ingrese correctamente el titular de su tarjeta de crédito/débito sin espacios por favor.	Sí
tarjeta_tipo	<select name="tarjeta_tipo" id="tarjeta_tipo"></select>	IBForm automáticamente poblará el campo de selección de la siguiente manera: <option value="visa">Visa</option> <option value="mastercard">MasterCard</option> <option value="american">American Express</option> <option value="diners">Diners Club</option>	Seleccione por favor el tipo de tarjeta de pago.	Sí

Agregando campos personalizados

Ir al contenido

Si el campo que usted desea validar no se encuentra en la lista anterior, es fácil crear su propio campo completamente a su gusto con tan sólo una línea de código por medio de la función addCustomInput de IBForm cuya sintaxis es la siguiente:

objetoIBForm.addCustomInput(fieldName, fieldType, regularExpression, errorMessage, isRequired)

Definición de parámetros:

• fieldName: Requerido. Acepta una cadena de texto (string) que deberá coincidir con el nombre del campo en el formulario que desea validar.
• fieldType: Requerido. Acepta los siguientes: “text”, “textarea”, “select-one”
• regularExpression: Requerido . Acepta una expresión regular para procesar la validación del campo.
• errorMessage: Requerido. Una cadena de texto donde se almacena el mensaje de error.
• isRequired: Requerido. Verdadero o Falso. Determina si el campo es requerido.

Para ilustrarlo con un ejemplo, al HTML del ejemplo original le he agregado un campo adicional que me permita validar números del seguro social estadounidense ya que el formulario será usado por visitantes de esa región. En adición, también requiero que el visitante seleccione su color favorito entre una lista de colores de la bandera Colombiana.

Para validarlo, simplemente agrego las siguiente dos línea en mi archivo validación.js. Note que el campo de selección no requiere de ninguna Expressión Regular.

Si tiene algún comentario, pregunta o insulto acerca de IBForm no dude por favor en escribirme a través de mi formulario de contacto.

Ir al contenido

El problema

Decidí mejorar un poco mi sitio web. A pesar de que el diseño anterior también era muy atractivo y podía sin problemas plasmar mis pensamientos en mi blog, me di cuenta con el tiempo de que no existía el espacio adecuado para exponer y hablar sobre mis últimos trabajos y proyectos. También me di cuenta (por ciertas experiencias) que no es bueno publicar la hoja de vida de uno de una manera tan pública. Es por eso que me urgía crear una nueva versión de mi sitio web donde pudiera incorporar estos nuevos cambios mientras al mismo tiempo se mejora la experiencia de usuario.

La solución

Mi nuevo sitio web es prácticamente un tema para WordPress que hace uso de ciertos plugins y taxonomías adicionales (ambos desarrollados por mí). El sitio web, fácilmente gestionable, mantiene una paleta de colores elegante con una interfaz simple lo que permite que el mismo sea fácil de usar y cómodo para la vista del visitante. En esta nueva versión de mi sitio web, se ha dado una gran importancia a la creación de espacios dedicados a la exposición de mis trabajos y experimentos. En concreto, la sección Soluciones y Laboratorio me permiten a mí mostrar mis proyectos.

Cada proyecto o experimento, consta adicionalmente de una página (como esta) donde hablo del mismo, explicando qué me motivó a la creación del determinado proyecto así como las técnicas de desarrollo que empleé hasta su culminación.

Una de las cosas más interesantes de este proyecto, es que tuve la posibilidad de implementar IBForms, mi propio sistema de validación de formularios que me permite fácilmente validar cualquier formulario antes de su respectivo procesamiento.

En adición, ud. también podrá notar que el acceso a mi hoja de vida es ahora restringido lo que ojalá reduzca el número de spam que recibía en mi correo. Si está interesado en consultar mi hoja de vida por favor no dude en escribirme a través del formulario ubicado en la página Acerca de. Yo le enviaré su código de acceso que le permitirá consultar mi hoja de vida hasta por treinta días.