Ajax y jQuery 6/6 – Procesando formularios con validaciones

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:

  1. Como primer parámetro reutilizamos el mismo action escrito en el formulario.

  2. 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.

  3. 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.

4 comentarios en “Ajax y jQuery 6/6 – Procesando formularios con validaciones”

  1. Hola, solo quería decirte que me gustan tus artículos y los estoy siguiendo con ansiedad, ya que estoy tratando de aprender algo de ajax.

    Una cosa que no me ha quedado clara es que si se envia por POST una serie de datos para consultar una DB, como podría rellenar de forma automática el form. Te pongo un ejemplo:
    Formulario mediante el cual introduzco programas de ordenador para tenerlos clasificados, me gustaría que si pongo una referencia que existe en la BD, me devuelva los datos y rellene el formulario.

    Hasta ahora todo lo hago con PHP, me parece buenísimo, pero si que es un problema que después de acabar de procesar en el servidor te devuelva que ese código de referencia ya existe y tengas que volver a rellenarlo. Eso se podría aplicar a NIF, etc. Todo esto no me queda claro porque no se si el javascript (ajax) puede establecer unas variables con el contenido devuelto, para usarlas con el PHP… la verdad es que estoy un poco perdido y sobre todo me asustaba el Ajax, pues nunca he aprendido javascript (tus explicaciones me han quitado un poco de miedo) Muchas gracias

    No se si podrás tratar el tema en algún artículo o si ya lo has tratado, voy a seguir mirándolo.

    1. Pedrog gracias por tu comentario 🙂

      Una vez que el código JSON es devuelto con el response Ajax eso lo puedes almacenar en una variable. Desde ahí tienes dos cosas para aprender de JavaScript.
      1. Con jQuery puedes obtener la referencia a cada input del formulario y cambiar su valor usando $(‘#inputid’).val(text), donde text será un valor a asignar al input. Lo que escribas en text se escribirá en el input.
      2. Tienes que aprender a trabajar con JSON en JavaScript. No te vas a arrepentir porque está buenisimo y te recomiendo un libro donde hay un capítulo de JSON muy bueno. Busca en http://www.librosweb.es el libro que se llama introducción al Ajax. Y veras como obtener los datos que vinieron en el JSON. Super recomendable.

      Pero por sobre todo tienes que recordar que no es que la respuesta Ajax te va a devolver algo para trabajar con PHP. Cuando vuelva tu respuesta Ajax ya NO puedes usar PHP porque ya estas en el navegador y PHP se ejecuta en el servidor y termino de ejecutarse en el servidor cuando la pagina se visualizo me entiendes?
      Pensaré en un ejemplo sencillo para un artículo y haz me saber si lo has logrado

  2. Amigo sigue subiendo tutoriales como este, son de gran utilidad.
    Seria interesante hacer un pequeño proyecto con JSON y PHP o con otro lenguaje Web (si no es mucha molestia) para ver un ejemplo más claro y resolver más dudas.
    Un abrazo

Comenta este artículo