http://web.tursos.com/tutoriales/jav...dar-con-jquery
funciones.js
$(function() {
var emailreg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
$(".boton".click(function(){
$(".error".fadeOut().remove();
if ($(".nombre".val() == "" {
$(".nombre".focus().after('<span class="error">Ingrese su nombre</span>');
return false;
}
if ($(".email".val() == "" || !emailreg.test($(".email".val())) {
$(".email".focus().after('<span class="error">Ingrese un email correcto</span>');
return false;
}
if ($(".asunto".val() == "" {
$(".asunto".focus().after('<span class="error">Ingrese un asunto</span>');
return false;
}
if ($(".mensaje".val() == "" {
$(".mensaje".focus().after('<span class="error">Ingrese un mensaje</span>');
return false;
}
});
$(".nombre, .asunto, .mensaje".bind('blur keyup', function(){
if ($(this).val() != "" {
$('.error').fadeOut();
return false;
}
});
$(".email".bind('blur keyup', function(){
if ($(".email".val() != "" && emailreg.test($(".email".val())) {
$('.error').fadeOut();
return false;
}
});
});
CONTACTO.HTML click para ver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script src='funciones.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Taller de psicomotricidad en caba zona oeste y zona sur - Juego y Desarrollo-</title>
<style type="text/css">
.fondoinicio {
background-image: url(imagenes/fondocontacto.jpg);
background-repeat: no-repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: italic;
text-align: justify;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
#solo {
text-align: center;
}
#negra {
font-weight: bold;
}
justificar {
text-align: justify;
}
.fondoinicio table tr td p {
text-align: justify;
}
body {
background-image: url(fondo.jpg);
background-repeat: repeat;
}
</style></head>
<link rel="shortcut icon" href="http://www.juegoydesarrollo.com.ar/logointro.ico">
<body>
<table width="995" border="0" align="center">
<tr>
<td height="1131" valign="top" class="fondoinicio"><p><br />
<br />
<br />
<br />
<br />
<br />
</p>
<p> </p>
<table width="740" border="0" align="center">
<tr>
<td height="59" id="menu"><table width="740" border="0" align="center">
<tr>
<td width="93" height="35" align="center"><a href="index.html" target="_self">Inicio</a></td>
<td width="136" align="center"><a href="tallerdejuego.html" target="_self">Taller de juego</a></td>
<td width="106" align="center"><a href="educacion.html" target="_self">Educación</a></td>
<td width="73" align="center"><a href="terapia.html" target="_self">Terapia</a></td>
<td width="188" align="center"><a href="trabajoconpadres.html" target="_self">Trabajo con padres</a></td>
<td width="102" align="center"><a href="contacto.html" target="_self">Contacto</a></td>
<td width="12" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<br />
<table width="715" border="0" align="center">
<tr>
<td class="ws_images"><div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/10b.jpg" alt="" title="" id="wows1_0"/></li>
<li><img src="data1/images/13b.jpg" alt="" title="" id="wows1_1"/></li>
<li><img src="data1/images/14b.jpg" alt="" title="" id="wows1_2"/></li>
<li><img src="data1/images/3b.jpg" alt="" title="" id="wows1_3"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="">1</a>
<a href="#" title="">2</a>
<a href="#" title="">3</a>
<a href="#" title="">4</a>
</div></div>
<a class="wsl" href="http://wowslider.com">jQuery Slider Demo by WOWSlider.com v2.4</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script> </td>
</tr>
</table> <p><span class="fondoinicio"></span><br />
</p>
<table width="589" border="0">
<tr>
<td width="35"> </td>
<td width="544" colspan="2"><img src="imagenes/separadorarriba.png" width="547" height="74" /></td>
</tr>
<tr>
<td height="131" valign="top"> </td>
<td><form class='contacto'>
<div><label>Tu Nombre:</label><input type='text' value=''></div>
<div><label>Tu Email:</label><input type='text' value=''></div>
<div><label>Asunto:</label><input type='text' value=''></div>
<div><label>Mensaje:</label><textarea rows='6'></textarea></div>
<div><input type='submit' value='Envia Mensaje'></div>
</form></p></td>
<td><p>xx<br />
xxx<br />
xxx<br />
xxx</p>
<p>xxx<br />
xxx<br />
xxx<br />
xxx</p></td>
</tr>
<tr>
<td height="76"> </td>
<td colspan="2"><img src="imagenes/separadorabajo.png" width="547" height="74" /></td>
</tr>
</table>
<br /></td>
</tr>
</table>
<table width="995" border="0" align="center">
<tr>
<td height="21" align="center">Pagina realizada por <a href="http://nldweb.com.ar/" target="_blank">nldweb.com.ar</a></td>
</tr>
</table>
</body>
</html>
INDEX.PHP (probe con contacto.php pero tampoco funciona) click para ver
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script src='funciones.js'></script>
</head>
<body>
<?php
if(isset($_POST['boton'])){
if($_POST['nombre'] == ''){
$errors[1] = '<span class="error">Ingrese su nombre</span>';
}else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/",$_POST['email'])){
$errors[2] = '<span class="error">Ingrese un email correcto</span>';
}else if($_POST['asunto'] == ''){
$errors[3] = '<span class="error">Ingrese un asunto</span>';
}else if($_POST['mensaje'] == ''){
$errors[4] = '<span class="error">Ingrese un mensaje</span>';
}else{
$dest = "aca puse el email"; //Email de destino
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = $_POST['asunto']; //Asunto
$cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
//Cabeceras del correo
$headers = "From: $nombre $emailrn"; //Quien envia?
$headers .= "X-Mailer: PHP5n";
$headers .= 'MIME-Version: 1.0' . "n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn"; //
if(mail($dest,$asunto,$cuerpo,$headers)){
$result = '<div class="result_ok">Email enviado correctamente </div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
}else{
$result = '<div class="result_fail">Hubo un error al enviar el mensaje </div>';
}
}
}
?>
<form class='contacto' method='POST' action=''>
<div><label>Tu Nombre:</label><input type='text' class='nombre' name='nombre' value='<?php echo $_POST['nombre']; ?>'><?php echo $errors[1] ?></div>
<div><label>Tu Email:</label><input type='text' class='email' name='email' value='<?php echo $_POST['email']; ?>'><?php echo $errors[2] ?></div>
<div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='<?php echo $_POST['asunto']; ?>'><?php echo $errors[3] ?></div>
<div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'><?php echo $_POST['mensaje']; ?></textarea><?php echo $errors[4] ?></div>
<div><input type='submit' value='Envia Mensaje' class='boton' name='boton'></div>
<?php echo $result; ?>
</form>
</body>
</html>
Espero que me den una mano hace unos dias vengo luchando con esto :p gracias y espero sus respuestas!
