Posts etiquetados ‘Javascript’

A continuación vamos a ver, mediante una sencilla aplicación, un buen ejemplo de las posibilidades que puede proporcionarnos esta magnífica funcionalidad que trae consigo el estándar HTML5. Dicha aplicación consistirá en la posibilidad de votar nuestras redes sociales favoritas, haciendo uso, claro está, de la operación arrastrar y soltar.
Empecemos con el código html:

<body>
	
	<div id="header">
		<img id="cabecera" src="img/cabecera.png" />
		<h2>Vota tus aplicaciones favoritas</h2>
	</div>
		
	<hr>
		
	<div id="containerVotacion">
			
		<div id="Muy_buena" class="destino verde" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
			<p>Muy buena</p>
		</div>
				
		<div id="Buena" class="destino amarillo" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
			<p>Buena</p>
		</div>
				
		<div id="Regular" class="destino rojo" ondrop="drop(event)" ondragover="allowDrop(event)"	ondragleave="dragLeave(event)">
			<p>Regular</p>
		</div>
			
	</div>
		
	<div id="containerElementos" ondrop="drop(event)" ondragover="allowDrop(event)"	ondragleave="dragLeave(event)">
			
		<img id="facebook" src="img/facebook.png" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
		
		<img id="twitter" src="img/twitter.png" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
				
		<img id="linkedin" src="img/linkedin.png" draggable="true"	ondragstart="drag(event)" ondragend="dragEnd(event)" width="64" height="64"/>
			
	</div>
		
	<footer id="pie">
		<button id="resultados" onclick="obtenerResultados();">Ver resultados</button>
	</footer>
		
</body>

 

Aquí podemos observar tan solo la parte del “body” del html, para no distraernos con otras líneas de código que ahora no importan.
La imagen dentro del primer div simplemente aparece a modo decorativo. Todos los recursos que se emplean aquí van a estar disponibles a través del enlace a mi repositorio Github que os dejaré al final del artículo.
Vamos a fijarnos en lo importante. Hay dos div contenedores que van a diferenciar la zona disponible para votar, de la que contendrá los iconos de las redes sociales más relevantes, y que estarán disponibles parar ser arrastrados y soltados en la zona de votación que deseemos.
Así pues queda claro que el div con id containerVotación integra a los tres div que equivalen a las votaciones “muy buena”, “buena” o “regular”. Podemos observar que todos estos div tienen tres eventos in line. Veamos qué hacen:

  • ondrop: Controla si en el div se han “soltado” elementos con la propiedad draggable (que pueden ser arrastrados) sobre él. Esto, evidentemente, determina que se trata de una zona drop válida que permite alojar esos elementos provenientes de un drag (“arrastre”). Al hacerlo llamará a la función drop, pasándole como argumento el propio evento.
  • ondragover: Controla que en el div se están arrastrando elementos con la propiedad draggable hacia una zona que permita “soltar” esos elementos. Al hacerlo llamará a la función allowDrop, pasándole como argumento el propio evento.
  • ondragleave: Controla el momento en que un elemento draggable abandona la zona drop donde se encuentra.

El div con id containerElementos dispone de los mismos eventos arriba mencionados. Esto permite que de él se puedan tanto arrastrar como soltar elementos, lo mismo que ocurre con los div contenidos en el div contenedor containerVotación de forma individual.

En su interior cuenta con tres imágenes que se encargan de mostrar los logos de las tres redes sociales más relevantes del momento, las cuales tienen un id correspondiente a la red social en cuestión, y cuyos eventos pasamos a comentar:

  • draggable: Permite que el elemento puede ser “arrastrado” hacia una zona drop válida. Como vemos, se trata de una propiedad que únicamente hay que igualar a true para que funcione sobre el elemento donde estemos declarándola.
  • ondragstart: Este evento se dispara cuando el elemento comienza a ser “arrastrado” desde una zona drop válida.
  • ondragend: El evento se dispara cuando el usuario finaliza el “arrastrado” del elemento sobre una zona drop válida.

Con todo esto, y resumiendo, lo que tenemos es una zona que contiene elementos “arrastrables” y que, a su vez, permite depositar elementos “arrastrados” a nivel general. Lógicamente se trata del div containerElementos y sus img correspondientes. Por otro lado tenemos la zona que contiene a su vez zonas individuales que permiten igualmente depositar elementos “arrastrados” o que se “arrastren” a partir de ellos. Se trara del div containerVotacion y sus correspondientes div con id igual al tipo de nota que queremos otorgar al elemento draggable en cuestión.

Para finalizar, tenemos en el pie de página un botón que será el encargado de obtener los resultados de la votación.

Veamos ahora el código javascript encargado de toda la funcionalidad:

var destino;
var arrastrando;
var ancho;
var alto;
var resultado=new Array();
var resultadoFinal=new Array();

function allowDrop(ev)
{
ev.preventDefault();
destino = devuelveElemento(ev);
destino.style.opacity="0.4";
}

function drag(ev)
{
arrastrando = devuelveElemento(ev);
ancho = arrastrando.width;
alto = arrastrando.height;
arrastrando.style.width=ancho/2+"px";
arrastrando.style.height=alto/2+"px";
var dragIcon = document.createElement('img');
dragIcon.src = 'img/vote.png';
dragIcon.width = 100;
ev.dataTransfer.setDragImage(dragIcon, -10, -10);
ev.dataTransfer.setData("Text", ev.target.id);
}

function dragLeave(ev){
destino.style.opacity="1";
}

function dragEnd(ev){
arrastrando.style.width=ancho+"px";
arrastrando.style.height=alto+"px";
}

function drop(ev)
{
var contenedorUsado = destino.id;
var elementoVotado = arrastrando.id;
resultados(contenedorUsado,elementoVotado);
ev.preventDefault();
destino.style.opacity="1";
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

function devuelveElemento(ev){
var elemento = document.getElementById(ev.target.id);
return elemento;
}

function resultados(voto,votado){
resultado.push(voto+" "+votado);
}

function obtenerResultados(){

resultadoFinal = sanearResultados();

var ancho= 700;
var alto = 500;
var posicion_x;
var posicion_y;
posicion_x=(screen.width/2)-(ancho/2);
posicion_y=(screen.height/2)-(alto/2);
MiVentana = window.open("","Resultados Drag&Drop HTML5","toolbar=no, location=no, status=no, resizable=no, top="+ posicion_y +", left="+ posicion_x +", width=700, height=500");
MiVentana.document.write('<!DOCTYPE html>\n<head>\n<title>Resultados Drag&Drop HTML5</title>');
MiVentana.document.write('\n<meta charset="utf-8"/>');
MiVentana.document.write('\n<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">');
MiVentana.document.write('\n<link rel="stylesheet" type="text/css" href="css/estilo.css"/>');
MiVentana.document.write('\n</head>\n<body>\n<div id="header">');
MiVentana.document.write('\n<img id="cabecera" src="img/cabecera.png" />');
MiVentana.document.write('\n<h2>Resultados</h2>\n');
for (var z=0;z<resultadoFinal.length;z++){
MiVentana.document.write(resultadoFinal[z]+"<br>\n");
}
MiVentana.document.write('<br>');
MiVentana.document.write('\n<input type="button" value="Cerrar" onclick="window.close()">');
MiVentana.document.write('\n</div>\n</body>\n</html>');
MiVentana.document.close();
}

function sanearResultados(){

var social = [];
var controlFacebook=0;
var controlTwitter=0;
var controlLinkedin=0;

for (var j=1;j<=resultado.length;j++){

var elemento = resultado[resultado.length-j].toString();

if (elemento.indexOf("Elementos")>0){
continue;
}

if (elemento.indexOf("facebook")>0 && controlFacebook==0){
social.push(elemento);
controlFacebook = 1;
}
if (elemento.indexOf("twitter")>0 && controlTwitter==0){
social.push(elemento);
controlTwitter = 1;
}
if (elemento.indexOf("linkedin")>0 && controlLinkedin==0){
social.push(elemento);
controlLinkedin = 1;
}

}

return social;
}

 
Bien, vayamos por partes.
Al principio declaramos unas cuantas variables a nivel global. Dos de ellas arrays.
Todas las funciones que se llaman cuando se desencadena algún evento ya visto, tienen como parámetro ev, es decir, el propio origen del evento mismo.

La función allowDrop, que se dispara cuando un elemento draggable pasa por una zona drop válida, lo que hace es guardar en la variable destino cuál es el elemento (en nuestro caso un div) sobre el que se está arrastrando un elemento draggable (en nuestro caso los img). Para ello se llama a la función devuelveElemento pasándole a su vez el origen del evento recibido. También damos una opacidad para que el contenedor drop disponible sobre el que se pasa, nos informe de que está listo para recibir el elemento draggable.

La función drag se dispara cuando un elemento draggable comienza a ser “arrastrado”. Para conocer de cúal se trata aprovechamos de nuevo la función devuelveElemento y lo guardamos en la variable creada para ello. Seguidamente hayamos su alto y ancho para asignarle la mitad de ambos durante el efecto de “arrastrado”. Además, creamos dinámicamente un pequeño icono bajo el elemento “arrastrado” para indicar al usuario que se está llevando a cabo el proceso. Para añadirlo definitivamente a nuestro elemento en proceso de “arrastrado”, debemos llamar al método dataTransfer, primero seteando su posición respecto al elemento “arrastrado” y después haciendo lo propio con el tipo de dato.

La función dragLeave se ejecuta cuando un elemento draggable deja de estar sobre una zona drop válida. En ese caso lo único que hacemos es eliminar la opacidad que tenga el contenedor drop sobre el que se acaba de terminar de pasar.

La función dragEnd devuelve el tamaño completo al elemento “arrastrado” cuando éste termina de “aterrizar” sobre una zona drop válida.

La función drop es llamada cuando una zona drop válida termina de recibir un elemento draggable. En ese momento obtenemos qué zona drop de nuestra aplicación está recibiendo el elemento y cuál es ese elemento (en nuestro caso el img de alguna red social). Esto ya lo sabemos gracias a las variables globales destino y arrastrando, que ya han guardado anteriormente esa información durante los pasos previos. Una vez los conocemos, llamamos a la función resultados pasándole esos datos. Lo que hace es añadirlos a un array, tal y como podemos comprobar un poco más abajo. Además eliminamos la opacidad de la zona drop y quitamos el icono que habíamos añadido para indicar que el elemento draggable estaba siendo arrastrado.
Finalmente, las funciones que nos quedan se van a encargar de obtener los resultados finales de la votación cuando pulsemos sobre el botón correspondiente.

La funcion obtenerResultados, que es la que se ejecuta al pulsar dicho botón, lo primero que hace es llamar al método sanearResultados. Dado que el usuario puede variar las veces que desee el elemento a votar por diferentes opciones drop, debemos tener en cuenta que, cada vez que lo haga, se registrará la votación dentro del array resultado visto anteriormente. Por esa razón debemos obtener siempre la última votación que haya recibido cada red social, ya que, como sabemos, un array siempre va guardando la información al final del mismo, a menos que no se le indique lo contrario. Así pues podemos ver que el bucle for comienza a recorrer el array por el final y va extrayendo la primera coincidencia que encuentra según el nombre de la red social. Todo ello se guarda en un nuevo array limpio de polvo y paja, y se devuelve como resultado.
Cuando se ha recuperado ese resultado desde la función obtenerResultados donde nos encontrábamos, lo único que hacemos es presentar una ventana flotante que mostrará finalmente, ahora sí, el resultado final, recorriendo para ello el nuevo array saneado que acabamos de recuperar.

Y eso es todo.

Quiero disculparme si la explicación es algo confusa, pero la verdad es que es algo complicado intentar plasmar a fondo línea a línea, qué es lo que hace cada una, sin ser algo redundante.
Recomiendo encarecidamente descargar la aplicación, probarla y, a continuación, con el código delante, volver a leer el artículo.
La aplicación completa cuenta con todos los recursos, fuentes y estilos, que terminan por otorgarle un buen aspecto final.

Descarga desde Github

Espero que este articulo os sirva para comprender un poco mejor cómo funciona esta maravillosa utilidad de HTML5 y, sobre todo, vislumbrar las infinitas posibilidades que nos puede ofrecer.
Gracias y un saludo.-

Capturas:

 

Drag&Drop

 

Drag&Drop

 

Drag&Drop

Hoy vamos a ver cómo crear un formulario web que, además de estar validado, tenga la virtud de poder ser ampliado con muy poco esfuerzo y que todas sus funcionalidades sigan en marcha.
Primero aclarar que con HTML5 los campos de tipo entrada pueden validarse automáticamente con la propiedad required (para comprobar que no estén vacíos) o, por ejemplo en el caso de un campo de entrada de email, con type=”email” poder testar que se escribe una dirección de correo correctamente. Esto está bien si supiéramos de antemano que todos nuestros visitantes usan un navegador que soporta HTML5. Pero, como sabemos, esto, desgraciadamente, no es así en más de las ocasiones de las que imaginamos. Conozco gente que todavía usa Internet Explorer 7.
Dicho esto, vamos a confeccionar este formulario a la vieja usanza, es decir, validado con JavaScript. Así que no me enrollo más y comenzamos con el código del HTML.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Ejemplo POO Javascript</title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
</head>


<body>

	<h1>Ejemplo POO Javascript</h1>

	<fieldset><legend>Formulario POO javascript</legend>
		<form id="formulario" method="POST" action="ejemplo.php">
			Nombre *:
				<br />
				<input class="negro" name="campo" type="text" id="nombre" />
				<br/>
				<br/>
			Email *:
				<br />
				<input  class="negro" name="campo" type="text" id="email"/>
				<br/>
				<br/>
			Teléfono:
				<br />
				<input  class="negro" name="telefono" type="text" id="telefono"/>
				<br/>
				<br/>
			Comentario *:
				<br/>
				<textarea class="negro" name="campo" id="comentario" ></textarea>
				<br/>
				<br/>
			<noscript>
				<input type="submit" id="enviar" value="Enviar"/>
			</noscript>
			<button type="button" id="enviar">Enviar</button>
			<button type="reset" id="borrar">Borrar</button>
		</form>
		<br />
		<p id="mensaje"></p>
		<br />
		<progress id="progreso" max="100" value="0">Progreso</progress>
	</fieldset>
</body>

<script type="text/javascript" src="js/script.js"></script>

</html>

Como vemos se trata de un formulario que contiene cuatro campos, tres obligatorios y uno opcional. El método action del form apunta a una supuesta página de envío que, en este ejemplo, solo está a modo de test para comprobar que el formulario funciona como debe hacerlo.
Lo realmente importante de aquí son los class, name e id de los campos así como, por supuesto, sus valores. Observamos que todos los campos obligatorios tienen el mismo class y el mismo name. Los id, sin embargo, hacen alusión al objetivo de cada uno de ellos. Bien, queda claro que el llamarles así ha sido de mi elección. Tú puedes llamarlos como quieras, eso sí, respetando que se repita en todos los campos obligatorios así como tenerlo en cuenta a la hora de ser referenciados desde nuestro archivo js, el cual, cargamos al final de nuestro archivo, antes del cierre.
Fuera del formulario tenemos una etiqueta de párrafo vacía con id mensaje que usaremos para ir informando al usuario si algo no está correcto. Además hemos puesto una barra de progreso que irá indicando visualmente qué tanto por ciento correcto se ha rellenado del formulario.
También hemos indicado en el head una hoja de estilos externa que veremos más adelante.
Vamos entonces paso a paso con nuestro archivo script.js, que lo tendremos dentro de una carpeta llamada js tal y como lo hemos indicado en el HTML.

//------añadir listeners sobre el evento onblur de cada campo del formulario
//------con nombre "campo"

var elementos = document.getElementsByName("campo");

// Recorremos todos los elementos
for (var i=0; i < elementos.length; i++) {

      // Añadimos el evento onblur a cada campo del formulario con nombre "campo"
	  //llamando a la funcion crearEvento que los añade dinámicamente
      crearEvento(elementos[i], "blur");
	  
}

//Esta función es llamada desde el bucle for anterior y añade dinámicamente
//los eventos a los elementos que se le pasan como argumento. En este caso todos
//los elementos con nombre "campo"
function crearEvento(elemento, evento) {
	
	if (elemento.addEventListener) {
	elemento.addEventListener(evento, 
		function(){var lanzando = new comprobarCampo(elemento);}, false);	  
	} 
	//-----Para IE
	else {
	elemento.attachEvent("on" + evento, 
		function(){var lanzando = new comprobarCampo(elemento);});
	}
}

Lo primero que hacemos es añadir dinámicamente un evento blur a todos los elementos de nuestro formulario que tengan el nombre campo que, como ya sabemos, son aquellos campos obligatorios de nuestro formulario. Para ello primero los guardamos en un array llamado elementos, y después los recorremos llamando a la función crearEvento pasándole como argumentos tanto el mismo elemento como el evento a escuchar. Esta función es la que se encarga de hacer el trabajo dinámicamente. Observamos que dentro de esta función tenemos un condicional ya que, Internet Explorer, como siempre, hace las cosas distintas a los demás navegadores. Internet Explorer no dispone de un método addEventListener, así que debemos hacerlo con attachEvent.
Con este evento controlaremos cuándo un usuario pasa de un campo a otro dentro del formulario y llamaremos a la función comprobarCampo pasándole como argumento el propio elemento.

//clase que comprueba el contenido del campo individual que se le pasa como
//argumento
var comprobarCampo = function(campo){
		
	this.campo = campo;
		
	if (this.campo.value == ""){
			
		ponerImagen(this.campo, "error");
				
				
	}
		
	else if (this.campo.id == "email" && 
	!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.campo.value)))
	{
		
		ponerImagen(this.campo, "error");
				
				
	}
		
	else{
		
		ponerImagen(this.campo, "ok");
				
	}

		progreso();
		mensajes();
}

La función comprobará que el campo que se le pasa no esté vacío y que, en caso de que sea el campo que contiene el email, compruebe la sintaxis de la dirección de correo a través de una expresión regular. Vemos que, tanto si se supera la comprobación como si no, se llama a una función ponerImagen pasando como argumentos el elemento campo en cuestión y un string que indica si ha ocurrido un error o todo es ok. Además llamamos consecutivamente a las funciones progreso y mensajes. Veámoslas.

var ponerImagen = function(campo,estado){

		this.campo = campo;
		this.estado = estado;
						
		var imagen = document.createElement("img");
		imagen.className = "image";
		
		if (estado == "error"){
			
			if(this.campo.nextSibling.className == "image"){			
				borrarImagenIndividual(this.campo.nextSibling);
				imagen.src = "img/error.png";
				this.campo.className = "rojo";
				this.campo.style.border = "2px solid red";
				var padre = this.campo.parentNode
				padre.insertBefore(imagen, this.campo.nextSibling);			
			}
			else{
				imagen.src = "img/error.png";
				this.campo.className = "rojo";
				this.campo.style.border = "2px solid red";
				var padre = this.campo.parentNode
				padre.insertBefore(imagen, this.campo.nextSibling);
			}
		
		}
		else{
		
			if(this.campo.nextSibling.className == "image"){			
				borrarImagenIndividual(this.campo.nextSibling);
				imagen.src = "img/ok.png";
				this.campo.className = "verde";
				this.campo.style.border = "2px solid green";
				var padre = this.campo.parentNode
				padre.insertBefore(imagen, this.campo.nextSibling);
			}
			else{
				imagen.src = "img/ok.png";
				this.campo.className = "verde";
				this.campo.style.border = "2px solid green";
				var padre = this.campo.parentNode
				padre.insertBefore(imagen, this.campo.nextSibling);
			}
					
		}

}

Esta función crea dinámicamente una etiqueta image a la que damos un nombre de clase llamado image. Dependiendo de si el string indica error o no, usará un png de 24×24 para mostrarlo al lado del campo input correspondiente. Las imágenes son de tu elección, y están alojadas dentro de una carpeta img como puede verse en la ruta. Para comprobar si el campo disponía anteriormente de una imagen a su lado usamos this.campo.nextSibling.className == “image”. Si ya existía una la borramos con la función borrarImagenIndividual pasándole el target en cuestión. Si no había ninguna entonces le añadimos la nueva que le corresponda.
Usamos un estilo dinámico para el contorno del input. Si hay error rojo, sino verde.
El código para borrarImagenIndividual es simplemente:

var borrarImagenIndividual = function(elemento){
	
	elemento.parentElement.removeChild(elemento);

}

Sigamos con las funciones progreso y mensajes.

var progreso = function(){

	this.elementos = document.getElementsByName("campo");
	this.porcentaje = Math.round((100 / elementos.length) * Math.pow(10, 2)) / Math.pow(10, 2);
	this.barra_progreso = document.getElementById("progreso");
	this.contador = 100;
		
	// Recorremos todos los elementos
	for (var i=0; i < elementos.length; i++) {	
				
		if (elementos[i].value == ""){			
			
			contador -= porcentaje;
				
		}		
		else if (elementos[i].id == "email" 
		&& !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(elementos[i].value))){
			
			contador -= porcentaje;
		
		}
		
		barra_progreso.value = contador;

	}	

}

La función progreso calcula dinámicamente el porcentaje de campos a rellenar en base a la cantidad de campos obligatorios del formulario. Ponemos una variable contador a 100, es decir, el total de la barra de progreso. A partir de ahí, recorriendo todos los elementos obligatorios del formulario, irá restando la variable porcentaje a la variable contador para determinar qué tanto por ciento está correctamente cumplimentado. El resultado se lo aplicamos a la barra de progreso que tenemos en nuestro HTML para que lo muestre visualmente.

var mensajes = function(){
	
	this.pMensaje = document.getElementById("mensaje");
	pMensaje.innerHTML = "";
	this.elementos = document.getElementsByName("campo");
	this.mensaje1 = "";
	this.mensaje2 = "";
	
	for (var i=0; i < elementos.length; i++) {		
		
		if (elementos[i].value == ""){			
			
			mensaje1 = "Por favor, rellene todos los campos obligatorios"; 
				
		}		
		else if (elementos[i].id == "email" && 
		!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(elementos[i].value))){
			
			mensaje2 = "Por favor, introduzca una dirección de email correcta";
		
		}

	}	

	pMensaje.innerHTML = mensaje1 + "<br />" + mensaje2;
}

La función mensajes se encargará de recorrer todos los elementos obligatorios del formulario y, en caso de error, añadir dinámicamente un texto informativo dentro de la etiqueta párrafo vacía con id mensaje que tenemos en nuestro HTML. Previamente limpiamos el contenido por si ya existiera alguno. Además, como cabe la posibilidad de que hayan varios mensajes distintos, declaramos una variable por cada comprobación y las concatenamos al final para mostrarlo.
Vamos ahora con el botón borrar de nuestro formulario:

//listener sobre el evento onclick del botón borrar formulario

if (document.getElementById("borrar").addEventListener){

	document.getElementById("borrar").addEventListener("click", function evento(){
		
		borrarTodasImagenes("image");
		
		var elementos = document.getElementsByName("campo");
		
		for (var i=0; i < elementos.length; i++) {
			
			elementos[i].className = "negro";
			elementos[i].style.border = "1px solid black";
		}

	} , true);

}
//-----Para IE
else if (document.getElementById("borrar").attachEvent){

	document.getElementById("borrar").attachEvent("onclick", function evento(){
	
		borrarTodasImagenes("image");
	
		var elementos = document.getElementsByName("campo");
		
		for (var i=0; i < elementos.length; i++) {
			
			elementos[i].className = "negro";
			elementos[i].style.border = "1px solid black";
		}
	
	});

}

Añadimos dinámicamente, como ya hicimos anteriormente, el evento click tanto para IE como para el resto de navegadores. Aparte de resetear el formulario, el botón devolverá el contorno negro a los input y se encargará de borrar todas las imágenes que hubieran de error u ok llamando a la función borrarTodasImagenes , pasando como argumento, en este caso, el nombre de clase que queremos eliminar (image).
La función borrarTodasImagenes quedaría así:

var borrarTodasImagenes = function(clase){

	this.clase = clase;

	var elementos = document.getElementsByClassName(this.clase);
	
	// Recorremos todos los elementos
	for(var k = elementos.length-1; k >= 0; --k){
		elementos[k].parentElement.removeChild(elementos[k]);
	}

}

Vamos ya con el botón enviar:

//listener sobre el evento onclick del botón enviar formulario

if (document.getElementById("enviar").addEventListener){

	document.getElementById("enviar").addEventListener("click", function evento(){
	
	var elementos = document.getElementsByName("campo");
	var lanzando = new comprobarTodo(elementos);
	
	

	} , true);

}
//-----Para IE
else if (document.getElementById("enviar").attachEvent){

	document.getElementById("enviar").attachEvent("onclick", function evento(){
	
	
	var elementos = document.getElementsByName("campo");
	var lanzando = new comprobarTodo(elementos);
	
	
	});

}

Igualmente asociamos el evento click al botón como hemos hecho hasta ahora, recuperamos todos los input obligatorios del formulario y se los pasamos como argumento a la función comprobarTodo.

//clase para comprobar todo el formulario al intentar enviarlo
var comprobarTodo = function(elementos){
	
	this.ok = true;
	this.elementos = elementos;
	borrarTodasImagenes("image");
	
	// Recorremos todos los elementos
	for (var i=0; i < elementos.length; i++) {
		
		if (elementos[i].value == ""){
			
			this.ok = false;
			ponerImagen(elementos[i], "error");
		
		
		}
		else if (elementos[i].id == "email" 
		&& !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(elementos[i].value))){
		
			this.ok = false;
			ponerImagen(elementos[i], "error");
		
		}
		else{
		
			ponerImagen(elementos[i], "ok");
		
		}		
	  
	}

	if (this.ok == true){
	
		document.getElementById("formulario").submit();
	
	}

}

Esta última función lo que hace es recorrer todos los input obligatorios y llamar a la función ponerIMagen tanto si está rellenado correctamente como si no. En el caso de que todo esté ok, el formulario será enviado.
Para terminar veamos nuestro CSS:

img {
	padding-left: 10px;
}
input{
	height:30px;
    font-size:14pt;
}

input,textarea{
	padding:10px;
	transition: all 0.15s ease-in-out;
	border-radius:3px;
	border:1px solid rgba(0,0,0,0.2);
}
#mensaje{
	font-weight:bold;
	color:red;
	font-size:10pt;
}
        
.rojo:focus {box-shadow: 0 0 5px rgba(255,0,0,1);border:1px solid rgba(255,0,0,0.8);}
.verde:focus {box-shadow: 0 0 5px rgba(0,255,0,1);border:1px solid rgba(0,255,0,0.8);}
.negro:focus {box-shadow: 0 0 5px rgba(178,166,167,1);border:1px solid rgba(0,0,0,0.8);}


progress[value] {
/* Eliminamos la apariencia por defecto */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* Quitamos el borde que aparece en Firefox */
border: none;
border-radius:5px;

/* Aplicamos las dimensiones */
width: 250px;
height: 20px;

/* Aplicamos color a la barra */
color: green;
}

/* Compatibilidad de color en Firefox y Chrome */
progress::-moz-progress-bar { background: #00A693; }
progress::-webkit-progress-value { background: #00A693; }

Lo más importante a destacar en este archivo es el aspecto personalizado que le damos a nuestra barra de progreso así como las clases rojo, verde y negro que le van a dar al input un efecto glow muy atractivo cuando el foco esté sobre él. Estas clases, si repasamos nuestro código anterior, veremos que se aplican dinámicamente cuando un campo es erróneo, cuando es ok o cuando se resetea con el botón borrar respectivamente.
Pues ya está. Terminado.
Ahora podemos añadir todos los input obligatorios que queramos a nuestro formulario, teniendo en cuenta fundamentalmente que su name debe ser campo y su class negro. De esta forma, todas las funcionalidades de nuestro código JavaScript serán aplicadas automáticamente sin hacer nada más. Bien es cierto que en este ejemplo solo tenemos en cuenta la comprobación de que el campo no esté vacío y que, en el caso de ser el campo email, sea una dirección de correo correcta, pero añadir nuevas validaciones no es nada complicado dado cómo tenemos estructurado nuestro código. Es obvio que nuestro formulario es quizás demasiado redundante en sus validaciones (imágenes, textos, barra de progreso), pero puedes adaptarlo fácilmente a tus necesidades sin demasiado esfuerzo. Además debemos tener en cuenta que por muy inteligente que sea nuestro JavaScript, debemos validarlo en el PHP destino para evitar posibles inyecciones de código no deseadas. Pero eso lo dejo para vosotros 🙂

He decidido compartir con vosotros un ejercicio que suelo poner a mis alumnos de JavaScript. Se trata de implementar el típico mensaje de autosugerencia cuando escribimos algo en una entrada de texto destinada a tal fin. Vamos a comenzar creando un archivo HTML que puedes llamar como quieras, aunque en mi caso le he llamado index.html para seguir la costumbre ya que se trata del punto de entrada. Si estás usando un IDE como Aptana, Dreamweaver o cualquier otro, crea un nuevo proyecto y añade este archivo. Si eres de los que prefiere hacer las cosas “a pelo”, pues crea el archivo en el mismo escritorio y solucionado.
Bien, vamos allá. Escribimos en el susodicho archivo lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Autosugerencia</title>
</head>

<body>

Escribe una palabra: <input type="text" id="palabra"/>

<ul id="suggest"></ul>

</body>

<script type="text/javascript" src="js/autosugerencia.js"></script>

</html>

Simplemente, como podemos ver, este archivo contiene un campo de entrada de texto con el id palabra, y una lista desordenada vacía con el id suggest. Al final, antes del cierre de la etiqueta HTML, cargamos el JavaScript que se encargará de todo dentro de una carpeta llamada js. Al archivo le he llamado autosugerencia.js, tú puedes llamarle como quieras, siempre y cuando en el paso siguiente crees ese archivo con el mismo nombre. Con solo esto en el HTML es con lo que vamos a trabajar.
Ahora creamos una carpeta llamada js y dentro un archivo llamado autogerencia.js en mi caso o, como ya he advertido, con el nombre que hayas decidido ponerle en el HTML. Entonces, una vez creado, escribimos el siguiente código:

// JavaScript Document

var palabras = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
				"julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];

document.getElementById("palabra").addEventListener("keyup", autosugerir, false);

function autosugerir(){

	var contador = 0;

	var escribiendo = document.getElementById("palabra").value.toLowerCase();

	document.getElementById("suggest").innerHTML="";

		if (escribiendo != ""){

			var caracteres = escribiendo.length;

			for (x=0; x < palabras.length; x++){

				var pArray = new String(palabras[x]);

				var sugerencia = pArray.substring(0,caracteres);

				if (sugerencia == escribiendo){

					contador++;
					var ul = document.getElementById("suggest");
					var new_li = document.createElement('li');
					new_li.className = pArray;
					new_li.style.cursor = "pointer";
					new_li.innerHTML = "Quizás quiso decir " + pArray;
					ul.appendChild(new_li);
					new_li.addEventListener("click", aceptar, false);

				}

			}

			if (contador == 0){

				var ul = document.getElementById("suggest");
				var new_li = document.createElement('li');
				new_li.innerHTML = "No hay sugerencias";
				ul.appendChild(new_li);

			}

		}

		else {

			var ul = document.getElementById("suggest");
			var new_li = document.createElement('li');
			new_li.innerHTML = "No hay sugerencias";
			ul.appendChild(new_li);

		}

}

function aceptar(){

		document.getElementById("suggest").innerHTML="";
		var palabraSeleccionada = this.className;
		var cajaTexto = document.getElementById("palabra");
		cajaTexto.value = palabraSeleccionada;

}

Veamos el código paso a paso.
Lo lógico sería que toda la información que va a ser auto sugerida fuera suministrada por una base de datos pero, para no complicar el ejemplo, vamos a hacerlo desde un array. Eso es precisamente lo que hacemos al comienzo, declarar un array que contiene los meses del año. Acto seguido vinculamos un listener en tiempo de ejecución al campo de texto donde el usuario irá escribiendo. Como vemos, al método addEventListener encargado de ello, se le pasan tres argumentos. El primero es el tipo de evento, el segundo la función destino que se ejecutará cuando el evento se produzca, y el tercero es un argumento booleano opcional. Si es true, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento.
Como vemos, el evento que vamos a “escuchar” es el keyup, es decir, cuando el usuario termine de pulsar una tecla. La función de llamada será autosugerir, y el último argumento lo ponemos a false, ya que no queremos que reaccione como hemos explicado hace un momento.
Hasta ahora lo único que tenemos son los datos para sugerir y un escuchador de eventos que estará alerta vigilando cuándo se pulsa una tecla sobre el campo de texto de nuestro HTML.
Bien, veamos ahora qué hace la función autosugerir que es la que va a realizar todo el trabajo. Primero iniciamos una variable contador a cero, después guardamos en la variable escribiendo el resultado de capturar el contenido del campo de texto y convertirlo directamente a minúsculas con la función de JavaScript toLowerCase(). Para asegurarnos que la lista desordenada se encuentra vacía, lo hacemos en la siguiente línea. Ahora, con el condicional, comprobamos que la variable escribiendo no esté vacía, es decir, que haya algún dato en el campo de texto. Si lo hay, guardamos en la variable caracteres la longitud de caracteres, valga la redundancia, de lo que haya escrito en el campo de texto. Seguidamente, con el bucle for, vamos a iterarnos desde cero hasta el total de elementos contenidos en nuestro array. Dentro de este bucle es donde se haya el meollo de la cuestión. Veamos.
Lo primero es guardar en la variable pArray el elemento del array situado en la posición x (variable que, como sabemos, ira aumentando en cada iteración y que comienza por cero). Después, en la variable sugerencia, guardamos el resultado de substraer del contenido de nuestra variable pArray (que, recordemos, contendrá un elemento del array distinto en cada iteración) los caracteres que existan entre cero y el total de caracteres escritos por el usuario hasta ese momento, que ya guardamos anteriormente en la variable caracteres. En el condicional comprobamos si existe alguna coincidencia entre el trozo que hemos obtenido del elemento de nuestro array y lo que haya escrito el usuario. Si es así, aumentamos la variable contador en uno (ya veremos para qué), capturamos la lista desordenada de nuestro HTML en la variable ul y creamos en tiempo de ejecución una etiqueta HTML li en nuestra variable new_li. A continuación le añadimos un nombre de clase que hacemos igual a lo que contenga en ese momento nuestra variable pArray, le añadimos un estilo de cursor y un texto que mostrará la sugerencia obtenida. Para que la etiqueta li creada en tiempo de ejecución pueda aparecer en el HTML, debemos añadirla con appendChild a nuestra lista desordenada. Finalmente, añadimos un listener a la etiqueta li que controlará el evento click sobre cualquiera de ellas y disparará la función aceptar que veremos en un momento. Como ya he comentado, en este bucle for se encuentra la lógica más importante del programa y hará que se muestren todas y cada una de las coincidencias encontradas entre lo que escribamos y nuestro array.
Después del bucle for vemos otro condicional que comprueba si la variable contador es igual a cero. Si recordamos, esta variable la inicializamos así al comienzo de nuestra función. Esto nos sirve para controlar si se ha encontrado alguna sugerencia o no dentro del bucle for, ya que, como hemos visto, la variable va sumando uno cada vez que se encuentra con una coincidencia. Si no es así, la variable seguirá valiendo cero y, por lo tanto, mostramos un mensaje de ello al usuario a través de una etiqueta li creada en tiempo de ejecución y que añadimos a nuestra lista desordenada en el HTML. También, en el else del if contenedor, mostramos lo mismo si la variable escribiendo se encuentra vacía (esto ocurrirá si el usuario escribe algunos caracteres y, posteriormente, decide borrarlos todos). Con esto tenemos visto toda la función autosugerir completa.
Al final del archivo nos encontramos con la función aceptar vinculada a cada una de las etiquetas li que se creen en tiempo de ejecución. Con esto haremos que si un usuario desea aceptar cualquier sugerencia mostrada haciendo clic sobre ella, se muestre automáticamente en el campo de texto. Como vemos, vaciamos la lista desordenada, guardamos en la variable palabraSeleccionada el nombre de la clase que tenga la etiqueta y que, a su vez, será igual al elemento del array, capturamos en la variable cajaTexto el campo de texto de nuestro HTML y, finalmente, le asignamos el valor de la variable palabraSeleccionada.
Y con esto ya lo tenemos.
Ahora podemos probarlo y si, por ejemplo, escribimos solo la letra m en nuestra entrada de texto, veremos como mágicamente aparecen las sugerencias de los meses marzo y mayo.
Como dije al principio, lo suyo es que la fuente de datos se encuentre en una BD y que, además, obtengamos esos datos mediante Ajax. Teniendo este código como punto de partida no es demasiado complicado implementarlo.
Pero eso lo dejo para vosotros 🙂
Espero que os haya gustado y os sea de utilidad.