Consejos para Formulario de Contacto

[frank228]

Hola, estoy aprendiendo AJAX, DOM y Javascript... estuve haciendo un típico formulario de contacto, no es el mejor del mundo y sé que no está muy bien el JS, pero voy aprendiendo y la cosa es que funciona que es lo importante, ya con la práctica seguro que el código será mejor. Quisiera que si alguno tiene tiempo y ganas lo cheque y me dé algunos consejos de qué hacer, qué no debo hacer o qué podría cambiar. Es sencillo para muchos de ustedes, pero voy empezando, así que no resalten demasiado cualquier idiotez que vean >.>

También tenía una duda. Cómo se hace para que cuando el usuario tenga desahabilitado JS solamente así se valide desde el script en PHP, y cómo podría hacerle para meter el script y el formulario en el mismo archivo y que sólo se ejecute dicho script cuando el archivo JS haga la petición al servidor y no cuando se cargue la página.

Aquí están los códigos:

Formulario

Código HTML:

<h2>Cont&aacute;ctame</h2>
	<tr>
	<fieldset id="forma">
		<form action="" method="post" id="fcontacto">
		<script src="../microproceso/modulos/funciones.js" language="javascript"></script>
		<br/>
		<table id="contacto">
		<tr>
			<td>Nombre:*</td>
			<td><input type="text" class="textbox" name="nombre" id="foNombre" value=""></input></td>
			<td id="errorNom" class="hiddenWarning">Introduce un Nombre V&aacute;lido.</td>
		</tr>
		
		<tr>
			<td>Correo:*</td>
			<td><input type="text" class="textbox" name="correo" id="foCorreo" value=""></input></td>
			<td id="errorCor" class="hiddenWarning">Introduce un Nombre V&aacute;lido.</td>
		</tr>
		
		<tr>
			<td>Asunto:</td>
			<td><input type="text" class="textbox" name="asunto" id="foAsunto" value=""></input></td>
			<td id="errorAsu" class="hiddenWarning">Introduce un Nombre V&aacute;lido.</td>
		</tr>
		</table>
		
			Mensaje:*
			<textarea class="textarea" name="mensaje" id="foMensaje"></textarea>
			<div id="errorMen" class="hiddenWarning">El mensaje no puede estar vac&iacute;o.</div>
			<input type="submit" name="submit" id="submit" class="submit" value="Enviar">
			<div id="error"></div>
		
		</form>
	</fieldset><div class="hidden" id="resultados">Gracias por enviar tu mensaje, te responder&eacute; lo m&aacute;s pronto posible.</div> 

Javascript

Código:

var nombre,
	correo,
	asunto,
	mensaje,
	error,
	flag,
	errorNom,
	errorCor,
	errorMen;
	
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{	
	var ref = document.getElementById('fcontacto');
	addEvent(ref,'submit',enviarDatos,false);
}

function validar()
{
	nombre = document.getElementById('foNombre').value;
	correo = document.getElementById('foCorreo').value;
	asunto = document.getElementById('foAsunto').value;
	mensaje = document.getElementById('foMensaje').value;
	error = document.getElementById('error');
	errorNom = document.getElementById('errorNom');
	errorCor = document.getElementById('errorCor');
	errorMen = document.getElementById('errorMen');
	flag = true;
	
	var form = document.getElementById('fcontacto');
	
	if(nombre == '')
	{
		errorNom.style.display = 'inline';
		document.getElementById('foNombre').focus();
		if(flag)
			flag = !flag;
	}
	else
	{
		errorNom.style.display = 'none';
	}
	if(correo == '')
	{
		errorCor.style.display = 'inline';
		document.getElementById('foCorreo').focus();
		if(flag)
			flag = !flag;
	}
	else
	{
		errorCor.style.display = 'none';
	}
	if(mensaje == '')
	{
		errorMen.style.display = 'inline';
		document.getElementById('foMensaje').focus();
		if(flag)
			flag = !flag;
	}
	else
	{
		errorMen.style.display = 'none';
	}
	
	if(flag)
		return true;
	else
		return false;
}

function enviarDatos(e)
{
	if(window.event)
		window.event.returnValue = false;
	else
		if(e)
			e.preventDefault();
	enviarFormulario();
}

function retornarDatos()
{
	var cad='';
	cad = 'nombre='+encodeURIComponent(nombre)+'&correo='+encodeURIComponent(correo)
	+'&asunto='+encodeURIComponent(asunto)+'&mensaje='+encodeURIComponent(mensaje);
	return cad;
}

var conexion;
function enviarFormulario()
{	
	conexion = crearXMLHttpRequest();
	conexion.onreadystatechange = procesarEventos;
	conexion.open('POST','modulos/contacto.php',true);
	conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	conexion.send(retornarDatos());
}
function procesarEventos()
{
	if(conexion.readyState == 4)
	{
		if(validar())
		{
			var resultados = document.getElementById("resultados");
			var forma = document.getElementById("forma");
			forma.style.display = 'none';
			resultados.style.display = 'inline';
		}
	}
}

/*------------------------------
FUNCIONES COMUNES
------------------------------*/

function addEvent(elemento,nomevento,funcion,captura)
{
	if(elemento.attachEvent)
	{
		elemento.attachEvent('on' + nomevento,funcion);
		return true;
	}
	else
	{
		if(elemento.addEventListener)
		{
			elemento.addEventListener(nomevento,funcion,captura);
			return true;
		}
		else
			return false;
	}
}

function crearXMLHttpRequest()
{
	var xmlHttp = null;
	if(window.ActiveXObject)
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	else
		if(window.XMLHttpRequest)
			xmlHttp = new XMLHttpRequest();
	return xmlHttp;
}

Script PHP

Código PHP:

  <?php

$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";

$headers .= "From: ".$_REQUEST['nombre']."<".$_REQUEST['correo'].">\r\n";

$destinatario = "[email protected]";
$asunto = "[MicroProceso]".$_REQUEST['asunto'];
$cuerpo = $_REQUEST['mensaje'];

mail($destinatario,$asunto,$cuerpo,$headers);

?>   

CSS

Código:

.hidden{display: none;}
.hiddenWarning{display:none; color:#f00;}
input.textbox{margin-right: 5px;border:#ccc 1px solid;background:#f9f9f9;font:1em Tahoma, Verdana Futura, Arial, Serif;padding:2px 0 0 3px;width:200px;}
textarea{width: 100%;height: 20em;border: 1px solid #ccc;background:#f9f9f9;font:1em Tahoma, Verdana, Arial, Serif;}
input.textbox:focus, textarea:focus{background:#fff;border:#999 1px solid;}
input.submit{float: right;margin: 10px 0 0 0;}
fieldset{border: #ccc 1px double; width:100%;}

Muchas Gracias!