codigo html
<!DOCTYPE HTML>
<html>
<head>
<title>WebTursos | Formulario de Contacto AJAX usando jQuery + PHP</title>
<link rel="stylesheet" href="estiloscorreo23.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="funcionescorreo2.js"></script>
</head>
<body>
<center><a href="http://web.tursos.com/?p=4971">← Volver al tutorial</a></center>
<form method="post" class="contacto">
<fieldset>
<div><label>Nombre:</label><input type="text" class="nombre" name="nombre" /></div>
<div><label>Email:</label><input type="text" class="email" name="email" /></div>
<div><label>Telefono:</label><input type="text" class="telefono" name="email" /></div>
<div><label>Mensaje:</label><textarea cols="30" rows="5" class="mensaje" name="mensaje" ></textarea></div>
<div class="ultimo">
<img src="ajax.gif" class="ajaxgif hide" />
<div class="msg"></div>
<button class="boton_envio" id="boton_envio">Enviar Mensaje</button>
</div>
</fieldset>
</form>
</body>
</html>
esta es la página que cargo en el div...
y ahora te pongo el js que valida:
$(document).ready(function(){
//$(".boton_envio").click(function() {
$("#boton_envio").live("submit",function()){
var nombre = $(".nombre").val();
email = $(".email").val();
validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
telefono = $(".telefono").val();
mensaje = $(".mensaje").val();
if (nombre == "") {
$(".nombre").focus();
return false;
}else if(email == "" || !validacion_email.test(email)){
$(".email").focus();
return false;
}else if(telefono == ""){
$(".telefono").focus();
return false;
}else if(mensaje == ""){
$(".mensaje").focus();
return false;
}else{
aler("dentro de correo");
$('.ajaxgif').removeClass('hide');
var datos = 'nombre='+ nombre +
'&email=' + email +
'&telefono=' + telefono +
'&mensaje=' + mensaje;
$.ajax({
type: "POST",
url: "procesocorreo2.php",
data: datos,
success: function() {
$('.ajaxgif').hide();
$('.msg').text('Mensaje enviado!').addClass('msg_ok').animate({ 'right' : '130px' }, 300);
},
error: function() {
$('.ajaxgif').hide();
$('.msg').text('Hubo un error!').addClass('msg_error').animate({ 'right' : '130px' }, 300);
}
});
return false;
}
});
});
y este procesa
<?php
// Guardar los datos recibidos en variables:
$nombre = $POST['nombre'];
$email = $POST['email'];
$telefono = $POST['telefono'];
$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>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 != '' && $mensaje != ''){
mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
//}
?>
una ayudita...
