Formularios: Validación y envío a Bases de Datos

Un buen formulario puede ser una gran herramienta para la recogida de información. Pero para poder aprovecharlo al máximo debemos potenciarlo. Hoy vamos a explicar de una manera sencilla como validar un formulario con jquery, como enviar la información recogida por PHP a tu dirección de correo y una base de datos en MySql.

¿Qué necesitamos?

Unos conocimientos básicos en html (con unos conocimientos de andar por casa nos es más que suficiente).
Un servidor que soporte PHP
Una base de datos en MySql y un mínimo control de las mismas.

El código del formulario.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario de prueba</title>
</head>
<body>
<div id="contenedor">
<form id="formulario" name="prueba" method="post" action="enviar.php" enctype="application_x-www-form-urlencoded">
<label>Nombre</label>
<input id="nombre" class="required" type="text" name="nombre" maxlength="60" />
<label>Apellidos</label>
<input id="apellidos" class="required" type="text" name="nombre" maxlength="60" />
<label>e-mail</label>
<input id="email" class="required email" type="text" name="nombre" maxlength="60" />
<input type="submit" name="enviar" id="enviar" value="Enviar Datos">
</form>
</div>
</body>
</html>

Este es un código para un formulario básico. Veamos el código con detenimiento. Primero declaramos el DOCTYPE y le damos un título al documento. Al “form” le damos el id=”formulario”. Puedes cambiar este id por el que estimes oportuno, pero ten en cuenta que este id va a ser necesario para la validación.

Este sencillo formulario tiene tres campos básicos: Nombre, apellidos y e-mail aunque se pueden utilizar tantos como necesitemos. A estos campos debemos darles un id y un name que les identifique en este caso: nombre, apellidos, email. Este id y el name también lo usaremos luego para hacer la conexión con la base de datos, tratadlos con cuidado. Además a cada campo que queramos que sea obligatorio le adjudicaremos la class=”required”, y si es un email class=”required email”. De esta forma comprobará que se han rellenado los campos antes de enviar el formulario y en el caso del e-mail verificará que es del tipo xxx@dominio.xx Esta validación nos da más posibilidades, pero antes vamos a ver como hacemos la validación

Validar el formulario:

<head>
<title>Formulario de Prueba</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>
</head>

Como la validación se hará por jquery lo primero que necesitamos serán los archivos js. Aquí os dejo el enlace para descargaros la última versión de jquery y la del plug-in de validación. Una vez que los hayamos descargados los guardamos en la carpeta js y los enlazamos a nuestro html como vemos en el código.

Ponemos en marcha la función a traves de la etiqueta “script” y definimos el id del formulario que vamos a validar. Como vemos en el ejemplo #formulario. Es importante que coincida con la que le dimos al form. Si queremos abrimos el archivo validate. js y buscamos las frases que aparecerán con la validación para traducirlas, ya que por defecto vienen en inglés. Es muy fácil. Además podremos ver todos los tipos de validaciones que nos permite este fantastico plug-in como por ejemplo por dígitos, url, etc.

Conexión a la base de datos MySql y envío de email.

Accede a la base de datos de MySql. Si no tienes muy claro como acceder, lo ideal es que lo hables con tu proveedor del alojamiento. Creas una nueva tabla llamada “prueba”, y en ella los campos que vamos a recojer, en nuestro caso nombre, apellidos, email. Yo además recomiendo crear un campo fecha, para saber con exactitud cuando se envió el formulario. Una vez que la base está hecha creamos nuestro archivo “enviar.php” para hacer la conexión. Veamos el código:

<?php
$fecha = date("d/m/Y H:i:s");
$nombre = $_REQUEST['nombre'] ;
$apellidos = $_REQUEST['apellidos'] ;
$email = $_REQUEST['email'] ;
$confirmacion = "Estos son los datos que has introducido. Muchas gracias por tu participación:<br /><br />Nombre: $nombre <br />Apellidos: $apellidos2";
mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());
mysql_select_db ('nombre_bd');
$query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')";
mysql_query($query) or die ('Error en la carga de datos');
mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx");
header("location:http://www.tudominio.es/respuesta.html")
?>

En primer lugar recojemos la información del formulario mediante la funcion REQUEST a las variables que deseemos. Lo más sencillo es llamar a la variable del mismo modo que hemos llamado a los id’s de cada campo. La variable “$nombre” recoje la información del campo con id “nombre”. Fácil, ¿verdad? Recogemos todos los datos y creamos una variable para el contenido del email de confirmacón: “$confirmacion”.

Ahora hacemos la conexión con la base de datos. Introducimos la dirección de nuestro servidor MySql, el usuario y la contraseña (estos datos os los dará vuestro proveedor de alojamiento), si falla nos aparecerá un error: mysql_connect (‘servidor’, ‘usuario’, ‘contraseña’) or die (‘Error: ‘ . mysql_error());

Seleccionamos la base de datos que queremos e introducirmos su nombre: mysql_select_db (‘nombre_bd’);

Luego hacemos el query para introducir los datos que hemos recogido en los campos que hemos creado en la base de datos. Para que entendais el código, le decimos que inserte en la tabla “prueba” en los campos que aparecen entre paréntesis los valores siguientes: $query=”INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES (‘$fecha’, ‘$nombre’, ‘$apellidos’, ‘$email’)”; Cerramos la conexión con la base de datos.

Ahora enviamos un email de confirmación mediante la función mail. La función mail se construye en base a cuatro campos, que se ordenan de la siguiente manera: Dirección de destino, Asunto del mensaje, Contenido del mensaje y Dirección de envío. Así nuestra función quedaria de la siguiente manera: mail($email, “Asunto del mensaje”, $confirmacion, “From: correo@dominio.xx”); Como vemos en la dirección de destino tomamos la variable $mail, para que se envíe a la dirección que nos facilitaron. Para el contenido del mensaje utilizamos también la varibale $confirmación que habiamos declarado antes.

Para terminar yo utilizo la función “header” que me permite redirigir a una página de respuesta. Es una buena idea porque así informamos al cliente de que todo se ha procesado correctamente.

Y ya está. Fácil y muy útil.

Descargar archivos formulario

 

 

Cualquier comentario o aportación será bienvenida.

56 comentarios sobre “Formularios: Validación y envío a Bases de Datos

  1. Pingback: Tweets that mention Formularios: Validación y envío a Bases de Datos | DisenioN -- Topsy.com

  2. carolina morales romero dice:

    Tengo un problema con el formularío, no me ingresa los datos a la base de datos pero cada vez que yo lleno el formularío y envío los datos si me marca un registro mas en la base de datos. Tampoco me envía el email de confirmación al correo.
    No se si sea porque yo agregue mas campos en el formulario, si modifique el archivo formulario.html y el archivo enviar.php pero no modifique los archivos jquerys.
    Ojala pudieran ayudarme. . .
    Mil gracias

  3. Diego González Villarejo dice:

    ¡Hola Carolina!

    Por lo que cuentas parece que el problema viene de los nombres de los campos en los archivos “formulario.html” y en “enviar.php” Si los nombres no coinciden la conexión con la base de datos se hará pero no guardará ningún registro porque o bien no está donde debe guardarlo o no hay nada que coincida con lo que debería guardar. Échale un vistazo a esto que te digo y si el problema persiste siempre puedes enviarme tus archivos a diego.gonzalez@disenion.com y le intentaré echar un vistazo.

    Un saludo y muchas gracias por leer el blog.

  4. carolina morales romero dice:

    Otra molestia más, tengo que subir al servidor las carpetas css y js; pero no se si comprimirlas y subirlas y me las guarda fuera del directorio raiz donde tengo alamcenados todos los archivos de la página, y si subo por separado los dos archivos jsquery y css me los guarda en el directorio raiz; pero der las dos formas al momento de ver la página ya en internet no me respeta el diseño de los archivos.

  5. Diego González Villarejo dice:

    Hola de nuevo Carolina,

    Es muy importante que los archivos que subas estén en las mismas carpetas y al mismo nivel que las que tienes en tu ordenador, si no es así el html no va a encontrar los archivos y no te va a funcionar nada. Posiblemente el diseño no sea el correcto porque no encuentra en css.

    Un saludo.

  6. julio balderas dice:

    la validación con jquery que propones ¿funciona aunque el charset de mi formulario html sea utf8? ¿existe otra forma sencilla de validar (spry de dreamweaver) o es más fácil con jquery?
    saludos

  7. Diego González Villarejo dice:

    Hola Julio,

    Perdona por haber tardado tanto en contestar, pero he estado de vacaciones.

    En principio la validación debería funcionar bien aunque el charset sea utf8. Formas de validar un formulario existen muchísimas. A mi me parece que esta es muy fácil, por eso la utilizo.

    Un saludo y gracias por leer el blog.

  8. Diego dice:

    Muy buen js. Si yo quiero usar un boton que no sea input, es decir un a con la propiedad onclick y que ahi si haga el document.form.nombre_form.submit();return false … que tengo que hacer o modificar en el jquery.validate.js para que me funcione y me capture el submit ahi?

    gracias!
    Diego.

  9. Diego González Villarejo dice:

    Pues la verdad Diego, es que sería un poco complicado cambiar el js. Además creo que sería tocar mucho el código y no se si sería capaz de conseguir.

    ¿Exactamente por qué quieres que el botón de envio no sea un input? Sin conocer muy bien tu caso creo que no ganas nada con poner un enlace . Si me puedes explicar un poco más qué intentas conseguir a lo mejor descubrimos una opción mejor.

    Un saludo y gracias a ti por leer el blog y por tu comentario.

  10. Endris dice:

    buenas amigo bien todo… pero no entiendo en que orden debo colocar el codigo de php.
    sera seguido del codigo del formulario htm? o en es un archivo que debo crear y donde lo coloco? gracias de antemano..

  11. Xurand dice:

    Excelente explicación… pero ahora me surge una duda y aqui te planteo:

    Como validar la existencia del correo enviando un “LINK” de confirmacion al correo.

    Esas que dicen: “Verifique su bandeja de entrada, haga click en el enlace para confirmar el registro”… si conoces alguna manera, metodo, o algo de como poder hacer eso porfavor mi correo es : xurand.gz@gmail.com

    Gracias de antemano y sigue asi ya que tu blog es muy bueno! =)

  12. Fabio dice:

    Hola amigaso!

    Yo tengo un problema. Tengo el formulario, tambien el código php para enviar los datos a la base. Lo que no puedo hacer es validarlo antes de que me salte el error de la base de datos. Dreamweaver tiene una validacion en java, pero no logro unir la validacion con el envio. Mi problema es que valida pero a la vez si tiene un error la carga, tambien salta el error en la base de datos.

    Gracias por leer mi problema. Saludos!

  13. Diego González Villarejo dice:

    Hola Fabio,

    Si has seguido por completo mi tutorial, la validación se realiza antes del envío a la base de datos. Si el formulario no es válido no se produce el envío por lo que nunca podrá darte error en la carga de datos. Si te envía a la carga de datos y no está validado el formulario algo no está correcto.

    Revísalo todo, puede ser que no esté correcta la ruta del jquery o del js de validación. Que el ID del formulario no coincida con el que le has dicho en el script. Que no le hayas dado las class=”required” a los inputs de formulario…

    Un saludo y gracias por leer el blog.

  14. Franco dice:

    tengo un problemita y no se cual es mi error,desde yta te aclaro que soy autodidacta y recien comienzo con el estudio de PHP,yo quiero hacer un formulario donde el que entre coloque el dia,mes y año en el que nacio y al darle enviar le diga que dia fue esa fecha en particular,te mando lo que hice para saber si me puedes dar una ayuda,desde ya muchisimas gracias.

    Envío de datos por GET y POST

    Formulario para averiguar una fecha

    Ingresa tu Fecha de Nacimiento(dd/mm/aaaa):
    Dia:
    Mes:
    Anio:

  15. Diego González Villarejo dice:

    Hola Franco,

    Con la información que me das no va a ser suficiente para ayudarte. No se exactamente como quieres hacer la conversión del formato Día-Mes-Año al dato Día de la semana (entiendo). Supongo que la información día de la semana debe estar alojada en un base de datos o en algún sitio similar. Si me pudieras explicar un poco más cuál es la situación quizás pudiera ayudarte.

    Un saludo y gracias por leer el blog.

  16. Emmanuel dice:

    Hola que tal, tengo un problema a la hora de la validación, puesto que no ingreso ningún dato en mi formulario y no me muestra los mensajes de campos obligatorios como en el tuyo y aun así inserta en la base de datos y hasta la función header() en el php me direcciona al archivo HTML de confirmacion.
    no se si tenga que meter mano en el código del archivo jquery.validate.js o que es lo que me falta hacer??
    Mi código html:

    Gracias !!

  17. Oscar Antonio Urbina Martinez dice:

    Hola, necesito crear un modulo de seguridad para un pequeño programa. necesito saber de lo mas simple hasta lo mas complejo. pues no se mucho… si me pueden ayudar estaria muy agradecido….
    Gracias..

  18. Diego González Villarejo dice:

    Voy a intentar constestaros a todos:

    @Emmanuel: Pues el problema puede venir por muchas vías. Comprueba que tengas enlazados en la cabecera la última versión del jquery y del validate. Comprueba también que tu formulario tiene el id “add_usr”. Esas son las comprobaciones básicas. Si ninguna de esa funciona lo ideal sería ver el código fuente.

    @Franco: El enlace que das ahora mismo no funciona. De todos modos el post trata un tema que está muy alejado de lo que pides, así que quizás este no sea el sitio para resolverlo. De todos modos si alguien quiere ayudar, bienvenido será.

    @Oscar: Si no das ni siquiera la información de que en lenguaje vas a programar ese módulo de seguridad, dudo que nadie pueda pasarte un enlace para que encuentres información. Aún así este post habla de validación de formularios html, por lo que no creo que aquí encuentres la solución a tu problema.

    Un saludo y muchas gracias.

  19. Kelvin dice:

    Buenas Tardes, Estaba usando otra funcion de validacion de jquery pero no me resulta la llamada a insertar.php (es el que inserta mis datos a la bd)

    Me pueden ayudar a resolver esto? de antemano muchas gracias.

  20. Moshe dice:

    Buenas tardes, me podrías decir como añadir un archivo adjunto al formulario (para enviarlo) y despues guardarlo junto con el resto de los datos en la BD de mysql? Gracias anticipadas.

  21. Moshe dice:

    Quiza me expliqué mal, lo que quiero es guardar el archivo adjunto en una carpeta del servidor y en la base de datos guardar la ruta del archivo. El objetivo es poder enviar desde una web corporativa correos y crear una bandeja de enviados. Gracias de nuevo

  22. Ricardo dice:

    Me gusto mucho tu post, pero tengo una duda, dentro de este carpeta de js tendra un metodo para mi password es que necesito que verifique que sean iguales las contraseñas para poder guardar un nuevo usuario.
    Si te confundi aqui te explico, el usuario se registra para obtener un acceso a mi sistema pero para eso introduce dichos campos y entre ellos es su propia pass.

    De antemano gracias amigo, buen $_POST.jeje

  23. Ricardo dice:

    Ya resolvi el problema que te plante con una validación aparte.
    Mi siguiente duda es que un administrador tiene un “index.php”en el cual realiza actividades superiores como altas bajas y cambios en la base, ahora tambien tengo un acceso como cliente en el cual realizo pedidos y otras operaciones obviamente en otro “index.php” mi siguiente duda es en el uso de SESIONES como podria realizarla.
    Como punto importante ambos usuarios comparten la base de datos en usuarios.

    En otras paginas entendi que debo de crear un campo en la base de datos que se llame STATUS en el cual le asigno el nivel de acceso y eso compararia en el uso de SESIONES, pero aún ando algo perdido.

  24. Diego González Villarejo dice:

    Perdonad la demora, pero me ha sido imposible responder antes. Voy a intentar responder a todo el mundo:

    @Moshe: Lo que pides es un poco más complejo que lo que se explica aquí. Si quieres enviar archivos adjuntos con el formulario te aconsejo que pruebes con otras opciones. Prueba con esto: http://www.html-form-guide.com/email-form/php-email-form-attachment.html (en inglés)

    @Ricardo: Me alegra que hayas solucionado lo de comprobar que dos campos sean iguales. Si puedes dejar por aquí la solución por si le sirve a alguien más. Lo otro que me preguntas es muy avanzado para mi y sientiendolo mucho no te puedo ayudar. Eso está fuera de mis conocimientos.

    ¡Gracias por leer el blog!

    • Diego González Villarejo dice:

      Hola Rene,
      Ese mensaje indica que hay un problema al intentar cargar los datos en la base de MySQL. Es posible que no se realize bien la conexión porque los datos de usuario y contraseña están mal. También es probable que se te haya pasado una letra en las distintas variables del archivo “enviar.php” Revisa bien todos los datos, ya que probablemente el error esté ahí.
      Un saludo y gracias por leer el blog.

  25. Ricardo dice:

    Hola muy buen aporte, necesitaria incluirle un calendario y 4 opciones de rangos horarios para la entrega de un producto podrias ayudarme ? Gracias

  26. Ricardo dice:

    Diego te hago otra consulta, logro que funcione el Formulario y que grabe en la BD pero no manda el mail ya que en ningun lado configuro la cuenta, el smtp y la contraseña.

    • Diego González Villarejo dice:

      Hola Ricardo,

      Para enviar el e-mail no hace falta configurar la cuenta. Se envía a través de la función “mail” de PHP por lo que no hay que configurar nada. Solo es necesario que tu servidor tenga instalado PHP, mejor si es la última versión, pero no es necesario.

      Un saludo.

  27. Fernando dice:

    Hola espero puedas ayudarme tengo un pequeño formulario en php que me registra usuarios, busca en la base cierta informacion y si puedo leer, pero a la hora de escribir en la base (insertar el registro) no me hace nada y me envia un error tengo los scripts de que manera puedo enviarlos para ver si los puedes revisar Muchas gracias por la ayuda que puedas ofrecerme

  28. MiguelA dice:

    Hola Diego, tengo un caso muy particular y se trata de un envìo de datos por php GET a una base de datos MySQL que tengo alojada en mi servidor. Resulta que manejo un programa llamdo FSACARS que por si no lo conoces, recoge datos de un simulador de vuelo y lo envìa por php al servidor donde está la DB, se conecta pero no guarda ningun dato ni genera registro alguno.
    Si no te complico mucho la vida y puedes arrojarme un lazo, te paso con mas detalles como tengo los archivos.
    Desde ya muchas gracias.
    Saludos
    MiguelA

    • Diego González Villarejo dice:

      Hola MiguelA:
      Pues la verdad es que hay muchísimos posibles errores para que sucede eso aunque lo más común es una no-coincidencia entre el nombre de los campos que deben ser rellenados en tu archivo PHP y el nombre de los mismos en la base de datos.
      Un saludo.

  29. MiguelA dice:

    Perdona, otra cosa que me gustarìa es ver como se puede enviar a la BD el segmento de tiempo en que un cliente permanece conectado a mi web.
    Nuevamente gracias.
    MiguelA

  30. MIGUEL dice:

    Hola Diego, ante todo gracias por responder , no son muchos los que lo hacen y tan rápido.
    El FSACARS en realidad no sería el problema porque funciona bien y me brinda un reporte completo generando un sendlog visible a través de una ventana del propio programa en mi PC y que esos datos deberían ser enviados al servidor.
    Este programa a través de la interfaz se confecciona y debe enviar datos a la base de datos al servidor donde tengo instalado la MySQL.
    Pues bien por lo que pude ver, se realiza la conexion a la DB porque me devuelve un loop (Así se dice jeje?) con un reporte pero vacío : http://reportedevuelo.p.ht/pilot_roster.php cuando debería aparecer un dato fundamental que falta (flight Time)
    No quiero enredarte mucho con temas específicos del funcionamiento de los programas ACARS , porque estoy convencido que el problema es el código php que utilizo y que tiene alguna falla.
    Los campos están bien designados no va por ahí el problema. Una vez me dio problemas similares un proyecto que hice hasta que en un foro encontré la falla y era una línea que si bien estaba correcta me producía un drama similar.
    $=_POST[‘data’]; (cambie esta linea por otra y funcionó) Pero traté de hacer lo mismo y no anduvo.
    Si es posible te envío todo el código y lo revisas pero no deseo complicarte la vida.
    Si puedes resolver este problema seria un Gol de Messi porque abundan en la web este tipo de fallas. Googleá: “FSACARS error send data base error” y podrás comprobarlo.
    Muchas gracias.

    • Diego González Villarejo dice:

      Hola de nuevo Miguel,
      Perdona que haya tardado tantísimo en contestar pero he estado fuera y me ha sido imposible. No se si habrás podido solucionar tu problema. Si aún sigues en ello y quieres enviarme los archivos para que les eche un vistazo no hay problema.
      Un saludo.

  31. Jose Antonio dice:

    Hola Diego, lo primero es agradecer tu generosidad por contestar a todas las dudas de la gente, te planteo rápidamente: yo valido los datos con Spry, pero necesito pasar por una comprobación antes de hacer el submit, lo que me obliga a ir a una function (JS), en donde si se da la condición, el hace un document.form1.submit(). Ahí está el problema, que al hacer el submit de forma remota, y no desde el input (submit) propio del form, deja de pasar por el Spry, y no hace la comprobación de campos. Espero haberme explicado bien.
    Un saludo un feliz 2014 a todos….

    • Diego González Villarejo dice:

      Hola José Antonio. Yo la verdad es que nunca he utilizado Spry. Así que no se cómo funciona y no te puedo dar una respuesta concreta. Pero, ¿lo que hagas con Spry no lo puedes hacer directamente con JQuery? La validación que hago aquí es sumamente sencilla y es completamente compatible con el submit remoto.
      Un saludo y feliz 2014 para ti también.

  32. manuel dice:

    Hola Diego,
    Cuando he dado con el tuto que explicas arriba casi se me caen don lagrimones porque se acerca mucho a lo que llevo buscando un tiempo y no veo luz. Te explico lo que quiero exactamente y me dices si puedes si es factible.
    Necesito crear un modulo en un CMS(joomla) con un solo campo form Telefono y un boton, la idea es que al introducir un telefono y pulsar el boton me diga si ese telefono existe o no en la base de datos.

    De antemano muchas gracias

  33. sergio dice:

    Hola,

    Excelente tutorial. funciono muy bien……….Muchas Gracias.

    Tengo solo un problema. Cuando se hacen los ingresos de registro, en la base de datos no me muestra la fecha y hora en que sucedio. Me aparece asi: 0000-00-00 00:00:00

    Cual sera el problema ?

Responder a manuel Cancelar respuesta

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