Noticias 

Validación de formulario con jQuery y PHP

php 


Hola amigos, bienvenidos de nuevo a otro tutorial de uno-de-piera.com, sobre el trabajo con php esta vez vamos a utilizar también la famosa librería Javascript jQuery, este tutorial es bastante avanzado, ya no por el trabajo con phpque es bastante básico, sino por el trabajo realizado con jQuery, que bien yo no soy experto, tengo algunos conocimientos y quiero compartirlos, por eso mismo, intentáremos explícarlos más detalladamente para que todos lo entendamos y sea sencillo de seguir y comprender, continuamos creando el proyecto sobre el que trabajaremos. 

Creamos nuestro proyecto





Vamos como siempre a nuestro directorio raíz y creamos una carpeta que podemos llamar form_contacto_jQuery por ejemplo, aquí iremos colocando nuestros archivos y las carpetas de nuestro proyecto. 


Hay varios temas que tratar, necesitaremos descargar varios archivos para que funcione nuestro formulario, doy por hecho que el que está viendo el post sabe de lo que estamos hablando, necesitamos descargar las librerías jQuery yjQueryUI desde jQueryUI porque vamos a crear un boton con jQueryUI que la verdad está muy bien, ésto nos dará los archivos necesarios para que funcione la parte javascript de nuestro formulario, cogemos la carpeta y la guardamos en nuestro proyecto. Con ésto, ya podemos seguir con la base de datos que utilizaremos para guardar los mensajes. 

La base de datos



Primero creamos la base de datos comentarios. 





y a continuación la tabla que llamaremos mensajes. 



Creamos nuestro formulario



Abrimos nuestro editor de código y pasamos a crear un archivo que llamaremos formulario_contacto.php e introduciremos el siguiente código que pasaremos a explicar detalladamente. 





En el head, llamamos a las hojas de estilo estilos.css que será con lo que demos estilos a nuestro formulario, a la hoja de estilos jquery-ui-1.8.20.custom.css con la que daremos estilo a nuestro botón y a las dos librerías que harán la validación javascript, jquery-1.7.2.min.js(la librería jQuery de siempre) y jquery-ui-1.8.20.custom.min.js, ésta última será con la que vamos a crear el botón. 


Seguido creamos el formulario que como vemos el action apunta a procesa.php que es donde se procesará y hacemos un if por si nos llega una variable GET llamada mensaje y que su valor sea enviado. 


Eso querrá decir que el formulario habrá pasado las validaciones jQuery o en su defecto las que hemos creado en php y se ha enviado al archivo procesa.php donde se habrá hecho correctamente la inserción y se ha devuelto a la página con la variable GET mensaje, y debajo del botón veremos un mensaje que dirá el mensaje fue enviado correctamente. 

La hoja de estilos



Creamos un archivo llamado estilos.css y lo guardamos en la carpeta de nuestro proyecto, seguido incluímos el siguiente código. 





Con esto, ya tenemos nuestro formulario estilizado y los mensajes de error con un diseño agradable. Ahora debemos crear nuestro archivo funciones.js que será donde este todo el código javascript. 

Creamos el código javascript



Creamos un nuevo archivo llamado funciones.js y dentro vamos a crear todas las validaciones de nuestro formulario, incluído un pequeño plugin que crearemos para darle un mejor aspecto al formulario, este es el código. 





Para crear nuestro plugin debe ir este código jQuery.fn.nombre de nuestro plugin = function(){ y esta línea también es obligada 


this.each(function(){ aquí iría nuestro código }); return this; hacemos un return y cerramos el plugin con }; 


Después sólo nos hara falta llamarlo donde nos haga falta. 


Con esto ya tenemos validado nuestro formulario correctamente, tanto en php como en jQuery, pasamos a crear nuestro archivo procesa.php que si nos damos cuenta a la hora de validar el formulario con php, el else quiere decir que todo el php se ha validado correctamente, nos envía a procesa.php, aquí es donde cogeremos los datos del formulario para procesarlos con la clase que crearemos. 

Nuestra clase



Creamos una carpeta llamada class dentro de nuestro proyecto y creamos un archivo llamado class.php, dentro colocamos el siguiente código. 





Con el código anterior creamos nuestra clase Conectar y la función con para realizar la conexión con la base de datos, aunque ya sabemos que cada clase debería ir en un archivo, está vez creamos las dos clases en el mismo archivo para agilizar un poco todo y no llenar más el post, seguido creamos la clase Comentarios y la función nuevo_comentario con los parámetros del archivo procesa.php, que es quién le dará los valores y seguidamente realizamos la inserción en la base de datos, le pasamos a las variables que vienen del formulario la función mysql_real_escape_string para evitarnos las inyecciones de código, el primer campo le ponemos null porque es autoincrementable y nos lo da la base de datos, y los dos útlimos le asignamos la función now(), que nos dará la hora y la fecha en que se realizó la inserción. 

El archivo procesa.php





Aquí recibimos los datos del formulario, realizamos las validaciones con php por si acaso el usuario tiene desactivado javascript para comprobar que los campos no vengan vacíos, que el email este en un formato correcto y en el caso del nombre y el mensaje con la función strlen comprobamos que se escriban un número mínimo de caracteres y seguido, haciendo un require_once de la clase donde tenemos la conexión con nuestra base de datos y la función para realizar las inserciones lo procesamos, en caso de que se haga todo correctamente nos devolverá de nuevo a nuestro formulario con la variable GET mensaje y con valor enviado, con lo que nos mostrará un mensaje de que todo ha ido bien, este es el código. 





Y ya está amigos, espero que les sea de gran utilidad y si tienes cualquier duda visita http://www.uneweb.edu.ve/ y échale un vistazo a nuestros cursos y diplomados.

Related posts