Validación Formulario Javascript no intrusivo

[nuevaweb]

Buenas tardes,

Estoy creando una simple validación para comprobar los campos que están vacíos y mostrar un error de campo obligatorio cuando este campo no se rellene.

Esta validación la estoy haciendo con javascript no intrusivo accesible.

problema que me surge es el siguiente:

Actualmente funciona la validación pero muestra el error cada vez que quito el foco del campo (onblur) y elimina toda la lista de errores (ul) que ha creado el JS cuando relleno el campo.

La idea es que no se repita el error cada vez que se compruebe si está vacío, y en el caso de que rellene el campo el error que se ha creado desaparezca. Es decir, que elimine el li que ha creado para meter el error cuando estaba vacío, y no borrar todo el UL como actualmente hace.

Adjunto un enlace dónde está el formulario que estoy haciendo, desde ahí mismo podéis ver el código:

HTML

Código:

<h1>Iniciar sesión</h1>
<div class="formulario login" id="formulario">
	<div id="errores"></div>
	<form id="form_contacto" action="#" method="post">
		<label for="usuario">
			<span>Usuario:</span>
			<input type="text" id="usuario" />
		</label>
		<label for="contrasena">
			<span>Contraseña:</span>
			<input type="password" id="contrasena" />
		</label>
		<div class="btnSubmit">
			<input type="reset" value="Borrar datos" />
			<input type="submit" value="Enviar" />
		</div>
	</form>
</div>

JAVASCRIPT

Código:

window.onload = function(){
	var elemInput = document.getElementById('formulario').getElementsByTagName('label');
	for(var i = 0; i < elemInput.length; i++){
		var elem = elemInput[i].getElementsByTagName('input');
		for(var j = 0; j < elem.length; j++){
			elem[j].onblur = validar;
		}
	}
}
function validar(){		
	var nombreCampo = this.id;
	var campoValor = document.getElementById(nombreCampo).value;
	var lista = document.getElementById('lista');
	if(campoValor == ""){
		var txtVacio = "Debe introducir el campo "+nombreCampo+".";
		var divErrores = document.getElementById('errores');
		divErrores.className = 'errores';
		var elemUL = document.createElement("ul");
		elemUL.id = 'lista';
		var elemLi = document.createElement("li");
		elemLi.appendChild(document.createTextNode(txtVacio));
		
		if (!document.getElementById('lista')){								
			divErrores.appendChild(elemUL);		
			elemUL.appendChild(elemLi);
					
		}else{
			var lista = document.getElementById('lista');
			lista.appendChild(elemLi);
					
		}
	}
	if(campoValor != ""){			
		padre = lista.parentNode;
		padre.removeChild(lista);
	}
}

Gracias.