Validar campos input de formulario con jquery

En el siguiente ejemplo vemos como validar los campos o los inputs de un formulario utilizando jquery, lo que haremos es mostrar un mensaje en verde cuando el campo este completado es decir no este vacío, de lo contrario mostraremos el mensaje por defecto:

La función es muy sencilla, la podéis modificar a vuestro gusto:

function validar(){
	
	//Almacenamos los valores
	nombre=$('#nombre').val();
	correo=$('#correo').val();
	telefono=$('#telefono').val();
	
	//Comprobamos y mostramos diferentes clases
	if (nombre==''){
		$('#respuesta_nombre').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_nombre').removeClass().addClass('ok');
	}
	if (correo==''){
		$('#respuesta_correo').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_correo').removeClass().addClass('ok');
	}
	if (telefono==''){
		$('#respuesta_telefono').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_telefono').removeClass().addClass('ok');
	}	
	//Si no hay ningun campo vacio enviamos el formulario
	if (nombre=='' || correo=='' || telefono==''){
		return false;
		}
		else return true;

}

Ejemplo completo solo copia y pega:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function validar(){
	
	//Almacenamos los valores
	nombre=$('#nombre').val();
	correo=$('#correo').val();
	telefono=$('#telefono').val();
	
	//Comprobamos y mostramos diferentes clases
	if (nombre==''){
		$('#respuesta_nombre').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_nombre').removeClass().addClass('ok');
	}
	if (correo==''){
		$('#respuesta_correo').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_correo').removeClass().addClass('ok');
	}
	if (telefono==''){
		$('#respuesta_telefono').removeClass().addClass('inicio');
	}
	else {
		$('#respuesta_telefono').removeClass().addClass('ok');
	}	
	//Si no hay ningun campo vacio enviamos el formulario
	if (nombre=='' || correo=='' || telefono==''){
		return false;
		}
		else return true;

}

</script>

<form method="post" action="http://localhost/foros" onSubmit="return validar();" id="formjquery">

<input type="text" name="nombre" id="nombre" value="" onBlur="validar();" autofocus>
<span class="inicio" id="respuesta_nombre">Introduce tu nombre</span>
<br>


<input type="text" name="correo" id="correo" value="" onBlur="validar();">
<span class="inicio" id="respuesta_correo">Introduce tu email</span>
<br>


<input type="text" name="telefono" id="telefono" value="" onBlur="validar();">
<span class="inicio" id="respuesta_telefono">Introduce tu tel&eacute;fono</span>
<br>

<input type="submit" id="btn_send" value="Enviar" onClick="validar();" style="margin-left: 127px; padding: 4px 8px">
<br>

</form>
<style>
#formjquery {
	font-family: 'Open Sans', sans-serif;
}
input {
	margin:4px;
	padding:4px;
}
.inicio {
	color: rgb(55, 55, 55);
	background: #EFEFEF;
	border: 1px solid rgb(199, 199, 199);
	padding: 4px 8px;
	border-radius: 3px;
}
.ok {
  color: rgb(9, 97, 20);
  background: #B3FFBA;
  border: 1px solid rgb(42, 155, 18);
  padding: 4px 8px;
  border-radius: 3px;
}
</style>

Demo