Validacion de formulario con mensaje enviado

Alguien me pueden brindar alguna ayuda para hacer que cuando el usuario llene los espacios del formulario y este a haga click en enviar mensaje. valide y me ponga una imagen diciendo mensaje enviado y despues resetee todo los campos usando jquery, ajax. Porfavor alguna ayuda es lo ultimo que necesito para completar la web

Estos son los codigos solo me falta javascript para que cuando se envie, salga la imagen "mensaje enviado" que esta alado del boton Enviar Mensaje le coloque display:none; para que no se vea

Codigo HTML

Código HTML :

                    
<form id="formulario" action="contacto.php" method="post">              
<input type="text" name="nombre" id="nombre" class="info" placeholder="Coloque su nombre" required>
<input type="email" name="email" id="email" class="info" placeholder="Coloque su email" required>                                 
<input type="text" name="telefono" id="telefono" class="info" placeholder="Coloque su tel&eacute;fono">
<input type="text" name="asunto" id="asunto" class="info" placeholder="Coloque el asunto">
<textarea name="mensaje" id="mensaje" class="info" placeholder="Coloque su mensaje" cols="45" rows="10" required></textarea>                    
 <input type="submit" id="submit" value="Enviar mensaje"> 
<img src="imagenes/msj.png" alt="Mensaje Enviado" id="msjEnviado">                                                  
</form>     

Codigo CSS

Código :

   
input[type="text"], input[type="email"], textarea{
   background-image:linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
   background-image:-o-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
   background-image:-moz-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
   background-image:-webkit-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
   background-image:-ms-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
   border:1px solid #ABABAB;
   -webkit-box-shadow:inset 1px 2px 1px #D0D0D0;
   -moz-box-shadow:inset 1px 2px 1px #D0D0D0;
   box-shadow:inset 1px 2px 1px #D0D0D0;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   color:#686868;
   padding:5px;
   font-family:Century Gothic;
   font-size:14px;
   }
   input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
   background-image:linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
   background-image:-o-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
   background-image:-moz-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
   background-image:-webkit-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
   background-image:-ms-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
   }
   form #nombre{
   float:left;
   height:20px;
   width:200px;
   }
   form #email{
   float:left;
   height:20px;
   width:200px;
   margin:0px 0px 0px 10px;
   }
   form #telefono{
   clear:left;
   float:left;
   height:20px;
   width:200px;
   margin:10px 0px 0px 0px;
   }
   form #asunto{
   float:left;
   height:20px;
   width:200px;
   margin:10px 0px 0px 10px;
   }
   form #mensaje{
   clear:left;
   float:left;
   margin:10px 0px 0px 0px;
   width:423px;
   max-width:423px;
   }
   form #submit{
   clear:left;
   float:left;
   margin-top:20px;
   background:#E2E2E2;
   border:none;
   padding:8px;
   -webkit-box-shadow:0px 0px 0px 1px #B2B2B2;
   -moz-box-shadow:0px 0px 0px 1px #B2B2B2;
   box-shadow:0px 0px 0px 1px #B2B2B2;
   margin-left:5px;
   cursor:pointer;
   font-family:Century Gothic;
   }
   form #submit:hover{
   background:#F4F4F4;
   }
   
   #msjEnviado{
   margin: 20px 0 0 40px;
   opacity:.9;
   float:left;
   display:none;
   }

Codigo PHP

Código PHP :

<?php
// Guardar los datos recibidos en variables:
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$telefono = $_POST['telefono'];
$asunto = $_POST['asunto'];
$mensaje = $_POST['mensaje'];
// Definir el correo de destino:
$dest = "[email protected]"; 
 
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers = "From: $nombre $email\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 
// Aqui definimos el asunto y armamos el cuerpo del mensaje
$asunto = "Contacto";
$cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
$cuerpo .= "<strong>Email:</strong> ".$email."<br>";
$cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
$cuerpo .= "<strong>Asunto:</strong> ".$asunto."<br>";
$cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
 
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $telefono != '' && $asunto!= '' && $mensaje != ''){
    mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
}
?>

jaja siempre la ayuda demora no?

señor seria bueno que digo investigaras por tu cuenta en google y si tienes problema con el codigo aqui te yudamos no esperes que te hagamos todo o si ??

encontre algo pero aun asi me falla el codigo no aparece la imagen cuando se envia el mensaje.. me pueden decir en que falle? o que error ahi en el codigo??

Código Javascript :

function submit(){
   $('#formulario').submit(function(event) {
      event.preventDefault();
      var url = $(this).attr('action');  
      var data = $(this).serialize();
      
      //Validation
      var validation = true;
      if(!$("#email").val()){
         validation = false;
      }
      if(!$("#nombre").val()){
         validation = false;      
      }
      
      if(validation==true){
         $.post(url, data, function() {
            .removeClass('hide');
            $('#submit').fadeTo("slow", 0.1);
            $('#msjEnviado').fadeIn("normal");
            $('#formulario')[0].reset();
         });
      }
   });
};

La linea donde dice .removeClass('hide'); no esta atada a ningún selector, seguramente ahí te bota error y lo que esta debajo de eso no se ejecuta, además no veo que tengas ninguna clase llamada hide, así que esa linea esta sobrando.

function submit(){
$('#formulario').submit(function(event) {
event.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
var algo = new ImagenMensaje();

//Validation
var validation = true;
if(!$("#email").val()){
validation = false;
}
if(!$("#nombre").val()){
validation = false;
}

if(validation==true){
$.post(url, data, function() {
$('#submit').fadeTo("slow", 0.1);
$('#msjEnviado').fadeIn("normal");
$('#formulario')[0].reset();
});

}
});
};

function ImagenMensaje(){
document.getElementById('#msjEnviado').style.display = 'block';
}


aqui mi resultado pero aun asi no funciona