Hola, si efectivamente como te había dicho, lo escribí medio dormido al código...
Seria así:
Código HTML :
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Page Title</title>
<script type="text/javascript">
function checkCampo(campo){
var elemento = document.getElementById(campo.id);
if(elemento.value == ''){
$(elemento).after("<span class='error'>Campo obligatorio</span>");
$(elemento).focus();
}else{
/* llamas a una función para validar los datos */
}
}
</script>
</head>
<body>
<form>
<input type="text" id="nombre" name="nombre" onblur="checkCampo(this)"/>
<input type="text" id="apellido" name="apellido" onblur="checkCampo(this)" />
<input type="text" id="email" name="email" onblur="checkCampo(this)" />
<input type="submit" value="enviar" id="enviar" name="enviar" onblur="checkCampo(this)" />
</form>
</body>
</html>
No te andaba porque en vez de llamar a la función checkCampo, estaba escrito checkCampop....
Falta hacerle varias cosas como validar y que los mensajes no se repitan, pero desde acá tenes para entretenerte un rato.
Cualquier duda a su disposición my friend.
Saludos