¿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.
Cualquier comentario o aportación será bienvenida.
Pingback: Tweets that mention Formularios: Validación y envío a Bases de Datos | DisenioN -- Topsy.com
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
¡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.
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.
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.
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
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.
ññ{ñ{{ñ{ñ{ñ–
muy buen blog, gracias por la ayuda
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.
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.
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..
Hola Endris,
Como digo en el tutorial debes crear un archivo que se llame “enviar.php” y en él pones el código. Este archivo colócalo al mismo nivel que el html del formulario y listo.
Un saludo y gracias por leer el blog.
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! =)
Hola Xurand,
Vaya, lo que pides es ya algo bastante avanzado. De todos modos con una sencilla búsqueda en Google he encontrado esto que te será muy útil: http://www.codigofuenteya.com.ar/detalleconcepto.php?cod=72
¡Mucha suerte con tu proyecto y gracias a ti por leer el blog!
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!
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.
Gracias por el formulario, lo andaba buscando , cuando llegue a casa lo pruebo.
Gracias… man me ayudaste mucho con este post!