Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.
El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.
Recordemos el ejemplo anterior
El código del ejemplo anterior para la página de contacto es el siguiente.
<?php sleep(1) ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="loading"><img alt="Cargando" src="loading.gif" /></div>
<div id="mainmenu">
<ul id="menu">
<li><a href="inicio.php" class="ajax">Inicio</a></li>
<li><a href="acercade.php" class="ajax">Acerca de</a></li>
<li><a href="contacto.php" class="ajax">Contactos</a></li>
</ul>
</div>
<div id="content">
<h1>Contacto</h1>
<form action="procesar_contacto.php">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" /><br />
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto" /><br />
<label for="comentario">Comentario:</label>
<textarea cols="30" rows="5" name="comentario" id="comentario"></textarea><br />
<input type="submit" value="Enviar" />
</form>
</div>
</body>
</html>
Recordemos que el sleep() que tenemos en la línea 1 es solamente para provocar un tiempo de un segundo y poder probar la carga de la página. A nuestro formulario únicamente le agregaría un atributo method="post" ya que si no lo tiene por defecto utiliza el método get. Nuestro formulario envía los datos a una página procesar_contacto.php que actualmente la tenemos así:
<?php
//-- se procesa el form y supongamos que lo enviarmos por mail
// o se almacena en una base de datos. Finalmente redireccionamos
header('Location: contacto.php');
die();
?>
Simplemente aquí hacemos lo necesario con los datos y para ejemplo redireccionamos nuevamente a la página de contacto.php una vez que hayan sido procesados.
Hagamos los cambios sobre la página de contacto
En primer lugar vamos a agregar el atributo method=”post” y un id=”contacto_form” a nuestro formulario para obtenerlo como referencia quedando de esta manera:
<form id="contacto_form" action="procesar_contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" /><br />
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto" /><br />
<label for="comentario">Comentario:</label>
<textarea cols="30" rows="5" name="comentario" id="comentario"></textarea><br />
<input type="submit" value="Enviar" />
</form>
Como ya tenemos importada la librería de jQuery simplemente agreguemos el código JavaScript necesario para procesar el formulario. Recordemos la idea de Hijax siempre. Si nuestro navegador tiene soporte para JavaScript entonces se ejecutará el Ajax pero si no, debemos permitir el envío normal del formulario a través de una llamada sincrónica.
Muy importante es recordar las validaciones de los formularios. Quiero recalcar que las validaciones del lado del servidor deberían ser obligatorias ya que, justamente veíamos en el párrafo anterior, si el navegador no tiene soporte de JavaScript no se ejecutará la llamada Ajax como así tampoco las validaciones. Por lo que deberíamos tomar como norma tener siempre las validaciones en el servidor aunque también las tengamos en el cliente.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#contacto_form').live('submit', function(){
//-- Obtenemos la referencia al formulario. Podemos usar this
// ya que el evento lo estamos programando directamente sobre
// el formulario.
var form = jQuery(this);
//-- Las validaciones necesarias y de la forma que la quieran hacer
if(jQuery('#nombre').val() == '')
{
alert('Debe ingresar un nombre');
return false;
}
if(jQuery('#asunto').val() == '')
{
alert('Debe ingresar un asunto');
return false;
}
if(jQuery('#comentario').val() == '')
{
alert('Debe ingresar un comentario');
return false;
}
//-- La petición Ajax. Para el segundo argumento que debe enviar los
// campos del formulario concatemos el serialize() con un parámetro
// ajax=true solo para usarlo en la página procesadora y saber que
// se le está llamando por ajax.
jQuery.post(form.attr('action'), form.serialize() + '&ajax=true', function(data){
//-- El mensaje generado en el servidor lo mostramos aquí.
alert(data);
});
//-- Retornamos false para que no se ejecute el submit del formulario
return false;
});
});
</script>
El script es realmente muy sencillo. Primero decimos que cuando el DOM este ready registramos el listener para el evento submit del form, esto siguiendo las pautas del artículo sobre Hijax que ya vimos en esta serie de artículos. Obtenemos la referencia al formulario y luego vemos desde la línea 12 a la 28 las validaciones del lado del cliente para el formulario. Para este caso simplemente que no estén vacíos aunque pueden ser validaciones tan complejas como necesitemos.
La parte importante del envío Ajax lo vemos en las líneas 34 a la 37. Donde utilizamos el método post() del jQuery pedimos enviar los datos por POST teniendo en cuenta los siguientes argumentos:
- Como primer parámetro reutilizamos el mismo action escrito en el formulario.
-
El segundo son los datos del formulario que lo obtenemos con el método serialize() y si notamos concatenamos este string con un parámetro más que usaremos desde la página procesadora para saber que el request proviene de una llamada ajax.
-
El último argumento será la función anónima que se ejecutará una vez completada la solicitud.
Finalmente recordemos retornar false para no ejecutar el submit real del formulario.
Ahora que ya tenemos el formulario preparado pasemos a programar nuestra página procesadora.
Procesando los datos
Lo que debemos tener en cuenta aquí es que ahora el request que llama a esta página puede ser de tipo normal (sincrónico) o Ajax (asíncrono). Por lo que podemos hacer una distinción usando el parámetro adicional que agregamos obteniéndolo por $_POST['ajax'], en cuyo caso si viene con valor “true” significa que es Ajax y si no existe será una llamada normal.
Lo que más conviene será ver que cosas pueden ser genéricas para no repetir código por lo que podríamos crear una función para la validación y proceso en sí de los datos del form y finalmente ejecutar una redirección o devolver un simple mensaje de respuesta. Veamos como podría quedar nuestro procesador.
<?php
sleep(1);
//-- Valida y procesa el form y supongamos que lo enviarmos por mail
// o se almacena en una base de datos.
function procesarDatos()
{
//print_r($_POST);
}
if(isset($_POST['ajax']) && $_POST['ajax'] == true)
{
//-- Llamada al proceso.
procesarDatos();
//-- Imprimimos un mensaje que será obtenido para mostrarlo por la llamada
// asíncrona
echo 'Mensaje enviado con éxito';
}
else
{
//-- Llamada al proceso.
procesarDatos();
//-- Finalmente podríamos redireccionar por ejemplo manteniendo el
// ejemplo anterior
header('Location: contacto.php?');
die();
}
?>
De aquí es interesante notar que en las líneas 7 a la 10 creamos una función que validará y procesará los datos, independientemente a que lo envíe por mail o lo guarde en una base de datos, pudiendo dividir esto en varias funciones nuevamente de acuerdo a nuestra necesidad.
En las líneas 12 y 21 podemos ver que hacemos una distinción por el tipo de llamada a fin de redireccionar o enviar una respuesta.
Cualquiera sea la situación anterior, procesamos nuestros datos con la llamada a nuestra función como vemos en las líneas 15 y 24.
Finalmente lo que queramos hacer lo podemos hacer agregando el código necesario a este código ya que esto es para tener una estructura básica y lo más portable posible.
Espero que con esto tengan algo como para entender como validar y procesar un formulario utilizando Ajax.
Gracias a cbeltranv por el comentario sobre validaciones que me llevó a la creación de este artículos.
Tanto los comentarios como sugerencias para nuevos artículos son bienvenidos.