@reWebon dice:
"Terminado el #ICFES. Menos mal esa cosa sólo se hace una vez en la vida."

El mejor y más rápido script para la validación de formularios en español.

LaboratorioIBForm

Un liviano javascript que valida formularios en línea de una nueva manera mucho más fácil y extensible sin la necesidad de librerías adicionales como jQuery. Puede ver un ejemplo terminado haciendo clic aquí.

Descargar IBForm v0.09

  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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Demostración de IBForm</title></head>
  6.   <body>
  7.     <h1>Formulario experimental: Direcciones en formato estándar</h1>
  8.     <form action="#" method="post">
  9.       <p><label for="nombre">Ingrese su nombre:</label><input type="text" name="nombre" id="nombre"/></p>
  10.       <p><label for="correo">Ingrese su correo:</label><input type="text" name="correo" id="correo"/></p>
  11.       <p><label for="departamento">Seleccione departamento:</label><select name="departamento" id="departamento"></select></p>
  12.       <p><label for="comentario">Ingrese su comentario:</label></p>
  13.       <p><textarea rows="5" cols="30" name="comentario" id="comentario"></textarea></p>
  14.       <p><input class="button" type="submit" value="Enviar" /></p>
  15.     </form>
  16.   </body>
  17. </html>

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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Demostración de IBForm</title></head>
  6.   <body>
  7.     <h1>Formulario experimental: Direcciones en formato estándar</h1>
  8.     <form action="#" method="post">
  9.       <p><label for="interesado_pNombre_pApellido">Ingrese su nombre:</label><input type="text" name="interesado_pNombre_pApellido" id="interesado_pNombre_pApellido"/></p>
  10.       <p><label for="interesado_correoElectronico">Ingrese su correo:</label><input type="text" name="interesado_correoElectronico" id="interesado_correoElectronico"/></p>
  11.       <p><label for="casa_departamento">Seleccione departamento:</label><select name="casa_departamento" id="casa_departamento"></select></p>
  12.       <p><label for="interesado_comentario">Ingrese su comentario:</label></p>
  13.       <p><textarea rows="5" cols="30" name="interesado_comentario" id="interesado_comentario"></textarea></p>
  14.       <p><input class="button" type="submit" value="Enviar" /></p>
  15.     </form>
  16.   </body>
  17. </html>

Ahora, incluyamos el IBForm en el <head>:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type="text/javascript" defer="defer" src="IBForm-0.07.min.js"></script>
  6.     <title>Demostración de IBForm</title></head>
  7.   <body>
  8.     <h1>Formulario experimental: Direcciones en formato estándar</h1>
  9.     <form action="#" method="post">
  10.       <p><label for="interesado_pNombre_pApellido">Ingrese su nombre:</label><input type="text" name="interesado_pNombre_pApellido" id="interesado_pNombre_pApellido"/></p>
  11.       <p><label for="interesado_correoElectronico">Ingrese su correo:</label><input type="text" name="interesado_correoElectronico" id="interesado_correoElectronico"/></p>
  12.       <p><label for="casa_departamento">Seleccione departamento:</label><select name="casa_departamento" id="casa_departamento"></select></p>
  13.       <p><label for="interesado_comentario">Ingrese su comentario:</label></p>
  14.       <p><textarea rows="5" cols="30" name="interesado_comentario" id="interesado_comentario"></textarea></p>
  15.       <p><input class="button" type="submit" value="Enviar" /></p>
  16.     </form>
  17.   </body>
  18. </html>

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type="text/javascript" defer="defer" src="IBForm-0.07.min.js"></script>
  6.     <script type="text/javascript" defer="defer" src="validacion.js"></script>
  7.     <title>Demostración de IBForm</title></head>
  8.   <body>
  9.     <h1>Formulario experimental: Direcciones en formato estándar</h1>
  10.     <form action="#" method="post">
  11.       <p><label for="interesado_pNombre_pApellido">Ingrese su nombre:</label><input type="text" name="interesado_pNombre_pApellido" id="interesado_pNombre_pApellido"/></p>
  12.       <p><label for="interesado_correoElectronico">Ingrese su correo:</label><input type="text" name="interesado_correoElectronico" id="interesado_correoElectronico"/></p>
  13.       <p><label for="casa_departamento">Seleccione departamento:</label><select name="casa_departamento" id="casa_departamento"></select></p>
  14.       <p><label for="interesado_comentario">Ingrese su comentario:</label></p>
  15.       <p><textarea rows="5" cols="30" name="interesado_comentario" id="interesado_comentario"></textarea></p>
  16.       <p><input class="button" type="submit" value="Enviar" /></p>
  17.     </form>
  18.   </body>
  19. </html>

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

  1. window.onload =
  2.   function()
  3.   {
  4.   };

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     window.document.forms[0].onsubmit =
  5.     function()
  6.     {
  7.     };
  8.   };

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:

  1. window.onload =
  2.   function()
  3.   {
  4.     window.document.forms[0].onsubmit =
  5.     function(event)
  6.     {
  7.       event.preventDefault();
  8.     };
  9.   };

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:

  1. var evt = event || window.event;
  2. if (evt.preventDefault)
  3. {  
  4.   evt.preventDefault();  
  5. }
  6. else
  7. {  
  8.   evt.returnValue = false;  
  9.   evt.cancelBubble = true;  
  10. }

Lo que nos proporcionaría:

  1. window.onload =
  2.   function()
  3.   {
  4.     window.document.forms[0].onsubmit =
  5.     function(event)
  6.     {
  7.       var evt = event || window.event;
  8.       if (evt.preventDefault)
  9.       {  
  10.         evt.preventDefault();  
  11.       }
  12.       else
  13.       {  
  14.         evt.returnValue = false;  
  15.         evt.cancelBubble = true;  
  16.       }
  17.     };
  18.   };

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.     };
  19.   };

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.     };
  20.   };

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:

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.       erroresEncontrados = miFormularioIBForm.validate();
  20.     };
  21.   };

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:

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.       erroresEncontrados = miFormularioIBForm.validate();
  20.       if(erroresEncontrados.length == 0)
  21.       {
  22.         alert("El formulario es válido.");
  23.       }
  24.       else
  25.       {
  26.         alert("El formulario tiene errores.");
  27.       }
  28.     };
  29.   };
  30.   

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.       erroresEncontrados = miFormularioIBForm.validate();
  20.       if(erroresEncontrados.length == 0)
  21.       {
  22.         alert("El formulario es válido.");
  23.       }
  24.       else
  25.       {
  26.         var mensaje = "Se han encontrado los siguientes errores: \n"
  27.         alert(mensaje);
  28.       }
  29.     };
  30.   };

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.       erroresEncontrados = miFormularioIBForm.validate();
  20.       if(erroresEncontrados.length == 0)
  21.       {
  22.         alert("El formulario es válido.");
  23.       }
  24.       else
  25.       {
  26.         var mensaje = "Se han encontrado los siguientes errores: \n"
  27.         for (var aux=0; aux<=erroresEncontrados.length – 1; aux++)
  28.         {
  29.           mensaje += erroresEncontrados[aux][1] + "\n";
  30.         }
  31.         alert(mensaje);
  32.       }
  33.     };
  34.   };
  35.   

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     window.document.forms[0].onsubmit =
  6.     function(event)
  7.     {
  8.       var evt = event || window.event;
  9.       if (evt.preventDefault)
  10.       {  
  11.         evt.preventDefault();  
  12.       }
  13.       else
  14.       {  
  15.         evt.returnValue = false;  
  16.         evt.cancelBubble = true;  
  17.       }
  18.       var erroresEncontrados = new Array();
  19.       erroresEncontrados = miFormularioIBForm.validate();
  20.       if(erroresEncontrados.length == 0)
  21.       {
  22.         alert("El formulario es válido.");
  23.       }
  24.       else
  25.       {
  26.         var mensaje = "Se han encontrado los siguientes errores: \n"
  27.         for (var aux=0; aux<=erroresEncontrados.length – 1; aux++)
  28.         {
  29.           mensaje += erroresEncontrados[aux][1] + "\n";
  30.           this.elements[erroresEncontrados[aux][0]].style.borderColor = "#FF0000";
  31.         }
  32.         alert(mensaje);
  33.       }
  34.     };
  35.   };

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type="text/javascript" defer="defer" src="IBForm-0.07.min.js"></script>
  6.     <script type="text/javascript" defer="defer" src="validacion.js"></script>
  7.     <title>Demostración de IBForm</title></head>
  8.   <body>
  9.     <h1>Formulario experimental: Direcciones en formato estándar</h1>
  10.     <form action="#" method="post">
  11.       <p><label for="interesado_pNombre_pApellido">Ingrese su nombre:</label><input type="text" name="interesado_pNombre_pApellido" id="interesado_pNombre_pApellido"/></p>
  12.       <p><label for="interesado_correoElectronico">Ingrese su correo:</label><input type="text" name="interesado_correoElectronico" id="interesado_correoElectronico"/></p>
  13.       <p><label for="numeroSocialUSA">Ingrese su número de seguro social Estadounidense:</label><input type="text" name="numeroSocialUSA" id="numeroSocialUSA""/></p>
  14.       <p><label for="colorFavorito">Seleccione su color favorito:</label><select name="colorFavorito" id="colorFavorito"><option value="ninguno" selected="selected">Seleccione uno</option><option value="amarillo">Amarillo</option><option value="azul">Azul</option><option value="Rojo">Rojo</option></select></p>
  15.       <p><label for="casa_departamento">Seleccione departamento:</label><select name="casa_departamento" id="casa_departamento"></select></p>
  16.       <p><label for="interesado_comentario">Ingrese su comentario:</label></p>
  17.       <p><textarea rows="5" cols="30" name="interesado_comentario" id="interesado_comentario"></textarea></p>
  18.       <p><input class="button" type="submit" value="Enviar" /></p>
  19.     </form>
  20.   </body>
  21. </html>

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.

  1. window.onload =
  2.   function()
  3.   {
  4.     var miFormularioIBForm = new IBForm(window.document.forms[0]);
  5.     miFormularioIBForm.addCustomInput("numeroSocialUSA","text",/^[0-9]{3}-[0-9]{2}-[0-9]{4}/,"Por favor ingrese su número social",true);
  6.     miFormularioIBForm.addCustomInput("colorFavorito","select-one","","Por favor seleccione su color favorito",true);
  7.     window.document.forms[0].onsubmit =
  8.     function(event)
  9.     {
  10.       var evt = event || window.event;
  11.       if (evt.preventDefault)
  12.       {  
  13.         evt.preventDefault();  
  14.       }
  15.       else
  16.       {  
  17.         evt.returnValue = false;  
  18.         evt.cancelBubble = true;  
  19.       }
  20.       var erroresEncontrados = new Array();
  21.       erroresEncontrados = miFormularioIBForm.validate();
  22.       if(erroresEncontrados.length == 0)
  23.       {
  24.         alert("El formulario es válido.");
  25.       }
  26.       else
  27.       {
  28.         var mensaje = "Se han encontrado los siguientes errores: \n"
  29.         for (var aux=0; aux<=erroresEncontrados.length – 1; aux++)
  30.         {
  31.           mensaje += erroresEncontrados[aux][1] + "\n";
  32.           this.elements[erroresEncontrados[aux][0]].style.borderColor = "#FF0000";
  33.         }
  34.         alert(mensaje);
  35.       }
  36.     };
  37.   };

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

IvanBustos.com | Derechos Reservados ©2010. | Otro sitio más de Iván Bustoshttp://www.ivanbustos.com/Miami, FL 33166United States.