Comprobación dinámica de campos de usuario en formularios con Ajax y MooTools

motools

Hola a todos. Que os parece que cuando os estáis registrando en un sitio, tras haber rellenado todo el formulario, que a veces es interminable, os digan que el nombre de usuario o el email ya están siendo usados en el sitio. Quizás os parezca una nimiedad, pero si realizamos esa comprobación sobre la marcha en cada campo y mostramos en directo esos avisos, la usabilidad crece y las ganas de entrar en el sitio del usuario no se ven tan afectadas. Por ello me parece interesante la entrada que os propongo hoy, validar de manera asíncrona con Ajax y MooTools campos de un formulario.

Empecemos pues. Necesitaremos cinco archivos archivos, en sus respectivas ubicaciones para ordenar un poco todo:

  1. index.html
  2. js/code.js
  3. php/validarCampos.php
  4. php/conectar.php
  5. php/config.php

Estos, a parte de las librerías de MooTools (en el directorio js) y Bootstrap (en el ejemplo vinculado al cdn). Pero lo primero es crearnos una base de datos que tenga al menos un campo nombre y otro email en una tabla de usuarios. Tras ello crearemos un archivo llamado config.php que tendrá los datos de conexión:

Ahora que ya tenemos la configuración definida creamos un formulario básico:

Como podéis comprobar, he vinculado los archivos de MooTools al final de la página, justo antes de mi archivo de Javascript, podéis descargarlos de su sitio oficial(tanto en núcleo , como el archivo , en este caso, con todas las extensiones). Por otro lado me apoyo en Bootstrap para los estilos (si bien no he incluido su Javascript para evitar conflictos). Fijaros que hay un div con el id aviso que nos servirá para sacar los avisos que se produzcan.

Lo siguiente es ya meternos con el código de ajax y MooTools, este lo escribiremos en el archivo code.js que vinculamos al final del index.html:

El archivo anterior es el que va a mandar los datos que se hayan escrito en los campos de nombre y email del formulario, que son los que vamos a comprobar, al archivo php que hará las consultas a la base de datos para comparar los valores. Este archivo php es validarCampos.php.

Lo primero que hace es ocultar el div#aviso, por si tenía algún valor mostrándose. Lo siguiente es establecer la variable que realizará el request del envío. En esta se establece la url de validarDatos.php y lo que sucederá en función del estado del request. La verdad que con MooTools es bastante fácil darse cuenta de que es lo que estamos poniendo. En el caso de tener el request éxito, devolverá una respuesta que escribiremos en el div#aviso y además mostraremos este.

Tras el request se han agregado dos eventos a dos elementos. Uno para el input del nombre y otro para el del email. Ambos hacen lo mismo y es seleccionar el div#aviso y ocultarlo, luego obtener el valor del input correspondiente, definir el valor de la variable que se mandará y mandar el request por post cuando haya un evento onkeyup. De esta manera, cada vez que el usuario escriba un carácter, se mandará el valor del input. Destacar que el dato que se manda, por ejemplo en el caso de email, es email = ‘email=’+email; Lo que va entre comillas es el nombre de la variable y lo que se suma es su valor. De esa manera se recogerá un $_POST[‘email’]=’valor del input email’.

La respuesta obtenida será la que devuelva vaidarDatos.php:

Este archivo requiere de la clase conectar, que será el que cree la conexión y securize los datos como luego veremos. Lo que hace es obtener los datos enviados por post mediante ajax y hacer una consulta a la base de datos con el valor que toque (nombre o email, dependiendo de donde esté escribiendo el usuario), si la consulta devuelve alguna fila es que ese campo existe y devolveremos el texto correspondiente que será lo que se escriba en el div#aviso.

El archivo conectar.php es el siguiente

Este archivo como veis crea la conexión con los parámetros definidos en el config.php y además tiene un método llamado securizar que nos sirve para asegurar los valores de los inputs que usamos en las consultas.

Bueno, he intentado simplificar todo lo que he podido para centrarme solamente en el aspecto de la comprobación por ajax, dejando otro tipo de validaciones de lado. Espero que tengáis esto en cuenta a la hora de incorporarlo a vuestros proyectos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *