- Como hacer un formulario de contacto I: HTML y CSS
- Como hacer un formulario de contacto II: Validar con jQuery
- Como hacer un formulario de contacto III: Validar y enviar con PHP
- Como hacer un formulario de contacto IV: Almacenar en base de datos MySQL con PHP
Actualización: Acabo de publicar un tutorial para usuarios avanzados de como hacer un formulario de contacto similar a este, capaz de enviar mensaje sin recargar la pagina usando AJAX, todo en un solo tutorial.
Importante: este tutorial de jQuery es de dificultad avanzada, si no conoces muy bien los eventos de jQuery o si no sabes nada de jQuery te recomiendo que por favor revises lo siguientes tutoriales:
Esta es la continuación de este tutorial, la primera solo trata de HTML y CSS, si deseas saltarte ese paso puedes descargarte el resultado final de aquel tutorial en este enlace.
Preparación
Empezamos abriendo el archivo index.html y lo primero que vamos a hacer es incluir a jQuery en el documento (utilizando el CDN de Google):
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
</head>
Luego añadimos clases a cada uno de los elementos que están dentro del formulario para poder identificarlos y seleccionarlos con jQuery.
<body>
<form class='contacto'>
<div><label>Tu Nombre:</label><input type='text' class='nombre' value=''></div>
<div><label>Tu Email:</label><input type='text' class='email' value=''></div>
<div><label>Asunto:</label><input type='text' class='asunto' value=''></div>
<div><label>Mensaje:</label><textarea rows='6' class='mensaje'></textarea></div>
<div><input type='submit' value='Envia Mensaje' class='boton'></div>
</form>
</body>
</html>
funciones.js
Creamos un archivo en la misma carpeta que lleve de nombre funciones.js, este almacenara todo lo que tenga que ver con Javascript y luego en el index.html lo llamamos justo debajo de donde esta el código de jQuery:
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script src='funciones.js'></script>
</head>
En el archivo funciones.js, lo primero que haremos es definir el $(document).ready para asegurarnos que todo el código se ejecute solo cuando la pagina haya terminado de cargar, tenemos que crear también una variable que contenga los caracteres necesarios validar el campo de email mas adelante:
$(document).ready(function () {
var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
// aqui va a ir la validacion
});
Para validar el formulario lo que haremos sera primero obtener el valor de lo que el usuario ingrese en cada caja de texto y luego verificar por medio de una condicional si lo que se ingreso es correcto o no, si no es correcto haremos que jQuery muestre un mensaje de error.
Creamos un evento $(«.boton»).click seleccionando al boton de envio y dentro ponemos que:
$(document).ready(function () {
var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
$(".boton").click(function (){
$(".error").remove();
if( $(".nombre").val() == "" ){
$(".nombre").focus().after("<span class='error'>Ingrese su nombre</span>");
return false;
}else if( $(".email").val() == "" || !emailreg.test($(".email").val()) ){
$(".email").focus().after("<span class='error'>Ingrese un email correcto</span>");
return false;
}else if( $(".asunto").val() == ""){
$(".asunto").focus().after("<span class='error'>Ingrese un asunto</span>");
return false;
}else if( $(".mensaje").val() == "" ){
$(".mensaje").focus().after("<span class='error'>Ingrese un mensaje</span>");
return false;
}
});
});
Explicación
- Antes de la condición (linea 4) se esta definiendo que cada vez que se presione el botón se elimine el hipotetico mensaje de error, si no ponemos esto el mensaje de error se mantendra asi el usuario lo haya rellenado correctamente.
- Estamos usando val() para obtener el valor de cada una de las cajas de textos y hacer la comparación: si el resultado es vacio volvemos a seleccionar al elemento e invocamos a focus() que obligara al usuario a regresar a la caja de texto y con after() creamos el mensaje de error justo después de la caja de texto.
- Nota ademas que en el caso del campo de email se usa una comparacion doble (linea 8), osea se esta diciendo que si el campo no ha sido rellenado o (||) si no es un email bien escrito(emailreg es la variable que creamos anteriormente), muestre el mensaje de error.
Un poco de CSS…
Si probamos esto vemos que funciona pero que el error que muestra se ve feo y es porque esta sin estilos, ademas que esta validando el formulario solo cuando el boton de envio es presionado, vamos a arreglar primero los estilos, abrimos el fichero estilos.css y al final de todo ponemos:
.error{
background-color: #BC1010;
padding: 6px 12px;
border-radius: 4px;
color: white;
font-weight: bold;
margin-left: 16px;
margin-top: 6px;
position: absolute;
}
.error:before{ /* Este es un truco para crear una flechita */
content: '';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #BC1010;
border-left: 8px solid transparent;
left: -16px;
position: absolute;
top: 5px;
}
Mejorando la experiencia
Va quedando mucho mejor, sin embargo la validación aun se sigue ejecutando solo cuando el botón es presionado y esto es poco agradable para el usuario, lo que haremos sera identificar cuando el usuario haya rellenado de forma correcta el campo de texto y si es así eliminar el mensaje de error, pero sin que se presione el boton de envio.
Entonces despues que termina el evento $(«.boton»).click(mas o menos por la linea 19) agregamos lo siguiente:
$(".nombre, .asunto, .mensaje").keyup(function(){
if( $(this).val() != "" ){l
$(".error").fadeOut();
return false;
}
});
$(".email").keyup(function(){
if( $(this).val() != "" && emailreg.test($(this).val())){
$(".error").fadeOut();
return false;
}
});
Explicación
- El evento keyup() se usa para definir cuando el usuario esta tipeando algo sobre el elemento seleccionado, en la linea 19 estamos seleccionado a todos los campos de textos exceptuando al de email y le estamos diciendo que si lo que el usuario esta tipeando no es igual a ‘nada’, entonces que el .error se esfume (fadeOut).
- Para el campo de email es exactamente igual al de arriba solo que a este le ponemos que ademas de verificar si el campo esta rellenado o no, verifique también (&&) si lo que se ha escrito es un email correcto.
- Nota que las condicionales que estamos haciendo en esta parte, son iguales a las primeras que hicimos arriba solo que estas son invertidas porque lo que queremos hacer es eliminar el mensaje de error, no crearlo.
Ahora si lo probamos podemos notar que conforme vallamos rellenando correctamente los campos de textos, los mensajes de error irán desapareciendo sin necesidad de presionar el botón de envio.
Código final: funciones.js
$(document).ready(function () {
var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
$(".boton").click(function (){
$(".error").remove();
if( $(".nombre").val() == "" ){
$(".nombre").focus().after("<span class='error'>Ingrese su nombre</span>");
return false;
}else if( $(".email").val() == "" || !emailreg.test($(".email").val()) ){
$(".email").focus().after("<span class='error'>Ingrese un email correcto</span>");
return false;
}else if( $(".asunto").val() == ""){
$(".asunto").focus().after("<span class='error'>Ingrese un asunto</span>");
return false;
}else if( $(".mensaje").val() == "" ){
$(".mensaje").focus().after("<span class='error'>Ingrese un mensaje</span>");
return false;
}
});
$(".nombre, .asunto, .mensaje").keyup(function(){
if( $(this).val() != "" ){
$(".error").fadeOut();
return false;
}
});
$(".email").keyup(function(){
if( $(this).val() != "" && emailreg.test($(this).val())){
$(".error").fadeOut();
return false;
}
});
});
Eso es toda la validación del formulario del lado del cliente, en este tutorial veremos como hacer la validación del lado del servidor con PHP y ademas hacer que este formulario funcione de verdad haciendo uso de la función mail().