Ejemplo: formulario de contacto en AJAX con validación cliente y servidor

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

Descripción

En este ejemplo he realizado un formulario de contacto (es funcional, pueden aprovechar para enviarme un mensaje ;)) el cual realiza el proceso de envío mediante AJAX. También se incluyen algunos efectos visuales simples como la capa transparente para los mensajes de confirmación y los mensajes de ayuda flotantes que se pueden ver posicionando el cursor en el signo de pregunta de cada campo.

Como es costumbre en mis códigos, he desarrollado el ejemplo lo suficientemente independiente como para configurarlo, modificarlo sin demasiada complicación y probar su funcionamiento, pero lo suficientemente dependiente como para evitar el copiar/pegar y ya tenerlo andando felizmente en un sitio. La idea de este script es ayudar a comprender el envío mediante POST de varios parámetros y el manejo de las respuestas que el servidor retorna para mostrarlas en cliente.

Nombre: Ayuda
Empresa: Ayuda
Teléfono: Ayuda
Mail: Ayuda
Comentarios: Ayuda

Funcionamiento

El funcionamiento de este código es bastante sencillo: al presionar el botón "Enviar" una funcion JS se encarga de obtener los valores de los campos y validarlos en cliente utilizando diferentes criterios. Si algún campo es erróneo, se cambia su className para cambiar su fondo al color rojo y se muestra el mensaje de error correspondiente. Si no existen errores, se llamará a una función también JS que abrirá la conexión XMLHttpRequest con el servidor enviandole los datos que el usuario ha completado. El servidor validará los datos una vez mas he intentará enviar mediante la función mail de PHP la información a un correo electrónico configurable. Si todo ha salido bien en servidor, se envia a cliente la cadena "Ok"; caso contrario se enviará un "Error". Para finalizar, el cliente recibirá la cadena de respuesta del servidor y mostrará un mensaje de error o confirmación según corresponda.

Para obtener los códigos cliqueá aquí.

Comentarios, dudas, sugerencias sobre el ejemplo pueden enviarlas a: edanps@gmail.com. ACLARACION al 12/04/07: Debido a la enorme cantidad de usuarios que están utilizando los códigos en sus sitios sin respetar la licencia correspondiente, por el momento solo daré soporte vía e-mail a aquellos usuarios que yo pueda comprobar que cumplen con los puntos detallados en la misma. CORREOS DE USUARIOS QUE NO SE PUEDA COMPROBAR QUE CUMPLEN CON LA LICENCIA NO SERAN RESPONDIDOS. Gracias por comprender.