Menú adicional

Tursos

Tutoriales y cursos de desarrollo web en español

Usted está aquí: Inicio / Tutoriales / Como Hacer un Formulario de Contacto II – Validar con jQuery

Como Hacer un Formulario de Contacto II – Validar con jQuery

publicado el

Demo
Descargar

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().

Interacciones con los lectores

Comentarios

  3. Oscar dice

    Compa, hay algo que no me esta funcionando, es el limpiar el error cuando estoy escribiendo, no resulta, y como tu muestras en el ejemplo : $(«.boton») , yo debo reemplazar el «.» por «#», para que me tome los elementos que estan en la pagina…una guia para ver que pasa por fa…gracias.

    Responder

  4. edwin colina dice

    Hola Josue Ochoa descargue una plantilla en html con jquery javascript, les hice los cambios y llego la hora de la pagina de contacto el archivo contact.js es este:
    jQuery(function() {
    jQuery(‘.error’).hide();
    jQuery(«.button»).click(function() {
    // validate and process form
    // first hide any error messages
    jQuery(‘.error’).hide();

    var name = jQuery(«input#name»).val();
    if (name == «») {
    jQuery(«span#name_error»).show();
    jQuery(«input#name»).focus();
    return false;
    }
    var email = jQuery(«input#email»).val();
    if (email == «») {
    jQuery(«span#email_error»).show();
    jQuery(«input#email»).focus();
    return false;
    }

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailReg.test(email)) {
    jQuery(«span#email_error2»).show();
    jQuery(«input#email»).focus();
    return false;
    }

    var subject = jQuery(«input#subject»).val();

    var msg = jQuery(«textarea#msg»).val();
    if (msg == «») {
    jQuery(«span#msg_error»).show();
    jQuery(«textarea#msg»).focus();
    return false;
    }

    var dataString = ‘name=’+ name + ‘&email=’ + email + ‘&subject=’ + subject + ‘&msg=’ + msg;
    //alert (dataString);return false;

    jQuery.ajax({
    type: «POST»,
    url: «process.php»,
    data: dataString,
    success: function() {
    jQuery(‘#contactform’).html(«»);
    jQuery(‘#message’).html(«Contact Form Submitted!«)
    .append(«We will be in touch soon.»)
    .hide()
    .fadeIn(1500, function() {
    jQuery(‘#message’);
    });
    }
    });
    return false;
    });
    });

    que parte cambio para que el mensaje me llegue a mi correo

    y el html es este:
    donde se llama al archivo

    y el contactform

    Nombre

    Correo

    Asunto

    Mensaje

    Favor inserta un nombre !
    Favor inserta un correo !
    Favor inserta un correo valido !
    Favor inserta un mensaje !

    Responder

  5. Rey Villagomez dice

    hola primero que nada esta genial tu tuto, pero tengo un problema yo ocupo el jquery en java apenas lo estoy implementando tengo un problema con un formulario, como puedo hacer que me haga el action del formulario despues de que el jquery haga de las suyas, como puedo hacer para que el boton haga el submit, espero me ayudes

    Responder

  6. Andrés dice

    Hola mcuhas gracias por el tutorial, solo tengo unas dudas, si quiero enviar el formulario sin recargar ¿donde deberia introducir el codigo ajax para que despues de validar envie el formulario? y¿ si tendria que modificar algo al codigo de funciones.js. para que se pueda realizar esto?

    Responder

  7. Pedrog dice

    Hola, me ha parecido muy práctico y bien explicado el tutorial, pero me surgen una serie de dudas: ¿es imprescindible aplicarle una class a cada input o serviría con un id? Lo digo porque ya le tenia puesta clases css

    Responder

  9. juan dice

    muy buen tutorial! estoy intentando poner mas de un formulario en la misma pagina, en concreto tengo 3 formularios, cada uno va un email diferente. Mi duda es como decirle al Jquery de que formulario le llegan los campos, si lo sabeis gracias.

    Responder

    • Josue Ochoa dice

      Solo tendrías que cambiar el identificador del botón, osea usar clases distintas para cada botón, cosa que en el JS tendrías:


      $(".boton1").click(function (){

      });
      $(".boton2").click(function (){

      });
      $(".boton3").click(function (){

      });

      Responder

  11. Fran dice

    pero en html no se puede hacer es que no me aclaro mucho tengo todo lo anterior y el formulario colocado, pero cuando le doy a enviar presionando el boton no hace nada y e buscado el codigo ese que me as dicho pero es en php ¿no entiendo?

    Responder

    • Josue Ochoa dice

      Así es, el formulario esta dividido en 3 tutoriales, el primero es construir el form en HTML y CSS, el segundo es la validación del lado del cliente con jQuery y el ultimo(el de PHP) es el envio, ósea la parte funcional del formulario.

      Responder

  13. Alberto Morgado dice

    Hola Josue, un 10 por tu tutorial, super bien explicado.

    Solo tengo una pregunta y es a nivel CSS, en la clase .error pone position: absolute; sin ninguna posicion es decir sin top, left, right o bootm. ¿Porque se posiciona justo a la izquierda del input?

    Gracias

    Responder

  15. willians dice

    y para validar que las cajas de textos tengas un numero determinado de caractarere.
    por ejemplo:
    if( $(«.nombre»).val() == «» or $(«.nombre»).val()<=3 ){

    como se aria esto?? por que lo hice asi yno m funciona 🙁
    gracias.

    Responder

  16. WebAdicto dice

    Gracias por el tutorial, muy bueno; pero una pregunta: he hecho algo mal o esto no funciona para Firexfox?
    en IE y Chrome si hace caso al fadeout del error (de los campos nombre,correo..), pero en firefox no

    Responder

  17. nicolas dice

    Hola

    estoy viendo tu formulario pero en la demo cuando no pongo contenido a asunto o al mensaje no chequea que hay error si lo hace con los dos primeros ¿por que?

    gracias

    Responder

  19. Exeq dice

    Hola, el tuto está muy bueno, pero tengo un problema, espero me puedas ayudar. Yo creo la pagina de contacto .php basada en una plantilla desde Dreamweaver. Al ir al enlace de contacto dentro del sitio, todo bien, pero el problema viene cuando se envía el formulario ya que al refrescar la pagina contacto.php, especificamente el contenedor principal de la pagina, pierde los estilos css y la página se deforma. Alguien tiene alguna idea de qué podría ser?

    Responder

  20. mafuclero dice

    Eh visto de nuevo la validacion y esta ok! pero tengo una duda cuando estos campos no son obligatorios o sea en el correo y en el nombre q no sean campos obligatorios si el usuario lo escribe lo debe digitar bien y si no q no hay viene mi duda como hago hago q ya no me salga el mensaje de error si el valor es nulo

    Responder

  21. Ottoniel Santos dice

    Hermano, esto me esta gustando.. EXCELENTE TUTORIAL….. Por lo que eh leído, en el tutorial 3 es que nos muestra como hacer que envíe la información a un correo gracias mi hermano.. Esto se pone bueno como dicen aqui en RD.

    Saludos!!!!

    Responder

  24. Yessica dice

    Quisiera saber como agregarle desde php y js más elementos del formulario, y como agregarle algunas opciones como subir archivos

    Responder

    • Josue Ochoa dice

      Duplicar elementos de textos es facil, unicamente tendrias que copiar y pegar ciertas partes del código JS y PHP, por lo de subir archivos es mas complicado ya que la funcion mail() de PHP que yo sepa no soporta nativamente archivos adjuntos, tendrias que utilizar una libreria especializada como PHPMailer.

      Responder

  25. Yessica dice

    Deberias hacer un tuto de formularios complejos, en donde se requiera subir archivos, listas de menus, y varios tipos de preguntas, como un cuestionario, te lo agradecería.

    Responder

  27. mariano dice

    hola! buen tuto! pregunta:
    tengo el archivo funciones.js pero en que parte le escribo la programacion para que me lo envie a mi mail?
    es esto lo que tengo que poner?
    $dest = «mcalvo1980@hotmail.com»;

    gracias!

    Responder

  28. Carlos dice

    Que tal amigo tengo un problema bueno mas bien una duda como puedo hacer que me valide pero desde mysql pongo el codigo:
    $(document).ready(function () {
    $(«.col_3»).click(function (){
    $(«.error»).remove();
    if( $(«.nombre»).val() == «» ){
    $(«.nombre»).focus().after(«Campo obligatorio.»);
    return false;
    //}else if( $(«.nombre»).val() != «»){
    //Mira en esta parte es donde quiero que vaya la consulta
    //si te das cuenta en la parte de arriva compara que si el
    //campo esta vacio manda una alerta ahora si tiene datos
    // quiero que haga una consulta a mi bd y si el valor existe en la tabla
    //me rediriga a otra pagina y si no me marque una alerta de que
    //no existe el usuario como la que muestra cuando el campo esta vacio..
    // $(«.nombre»).focus().after(«El usuario no existe»);
    // return false;
    }
    });
    });

    espero puedas ayudarme con este problema saludos amigo

    Responder

  30. luis.jc dice

    hola amigo, stoy intentado validar un formulario de posteo y no puedo. el codigo completo es :

    hide_errors();
    auth_redirect_login(); // if not logged in, redirect to login page
    nocache_headers();
    global $userdata;
    get_currentuserinfo(); // grabs the user info and puts into vars
    require_once dirname( __FILE__ ) . ‘/post-process.php’;
    get_header(); ?>

    <h2 style="border: 1px solid #ccc; border-bottom: none; background: url(/sprite.png) left -738px repeat-x;text-align:center; padding-top: 5px; margin-top: 10px;»>Categorías

    Envia tu Anuncio

    La publicación de avisos es gratuito, sin embargo si usted desea destacar su anuncio o contratar publicidad en lugares estratégicos de la web, por favor <a href="» title=»Contacte con Nosotros»>póngase en contacto con nosotros, estaremos
    dispuestos a su disposición.
    <?php
    $ok = classy_filter($_GET['ok']);
    if ($err != "") { echo "X$err»; }

    if ($ok == «ok») {
    echo «» . __(‘Muchas gracias!, su artículo ha sido enviado satisfactoriamente.’) . ««;

    if ( get_option(«post_status») == «publish») {
    echo __(‘Alguien revisará su publicaci&ocute;n en breve. Si usted tiene alguna pregunta, póngase en contacto con el propietario del sitio.’) . «»;
    }
    echo «»;
    }
    ?>

    *
    <input type="text" id="title" class="mid" name="post_title" size="100" maxlength="100" value="» style=»padding: 5px;» />

    Por favor seleccione una categoría *:

    Suba una imagen
    (Las imágenes no deben ser mayores de 1MB, los formatos soportados son: jpg, png, gif y jpeg.)

    *(Mientras mejor se explique, mejores resultados podrá obtener).

    Etiquetas *
    <input type="text" id="post_tags" class="adfields" name="post_tags" size="60" maxlength="100" value="» style=»padding: 5px;» />

    Precio *
    (Es necesario que inserte el monto con su respectivo símbolo; ejm. S/.10.00, $20.00 USD, etc.)
    <input type="text" id="price" class="adfields price" name="price" size="50" maxlength="250" value="» />

    Dirección/Ubicación *
    <input type="text" id="location" class="adfields location" name="location" size="50" maxlength="250" value="» />

    Agregar URL
    <input type="text" id="addURL" class="adfields url" name="addURL" size="50" maxlength="250" value="» />

    Nombre de Contacto *
    <input type="text" id="name" class="adfields name" name="name" size="50" maxlength="250" value="» />

    Teléfono
    <input type="text" id="phone" class="adfields phone" name="phone" size="50" maxlength="250" value="» />

    Correo Electrónico *
    <input type="text" id="email" class="adfields email" name="email" size="50" maxlength="250" value="» />

    –
    – yienes algo similar para tomar un ejemplo? gracias

    Responder

  31. luis.jc dice

    Hola gracias por responder. la verdad es que soy torpe para esto. no se donde poner esto

    Contacto

    si en el archivo header.php o en el archivo poster.php

    Responder

  32. Simon dice

    Hola Josue. Primero decirte que sos un grande, come sano asi vivis 100 años!!
    Una consulta, al agregarle la etiqueta: telefono. Como seria el condicional: if( $(«.telefono»).val() == «…»
    para que si no pone telefono no pasa nada, manda mail igual, pero si lo pone que sea solo numeros.
    osea, si queda vacio. ok. si escribe algo que sea numerico solamente.
    gracias de antemano.

    Responder

  33. Oscar Hernandez. dice

    Hola que tal Josue, excelente trabajo. Quisiera validar un campo de tipo radio para seleccionar sexo masculino o femenino. Como podria validarlo???

    Responder

  34. iltse dice

    Estoy validando con jquery validate, pero tengo que validar que los datos ingresados sean solo texto, en que parte y como puedo validar esto???

    Responder

  37. Isva81 dice

    Bueno, como siempre, increíble, no sabía yo que existía el before, me ha sido de gran ayuda y sólo comento para agradecerte como siempre que lo haces refácil, un 10 y nada más, sin palabras.

    Responder

  39. eniq dice

    Hola buenas que tal, agradecimientos a este tutorial, la verdad es que me esta ayudando mucho en mis inicios. Me gustaria saber si me podeis ayudar a crear una regla, para que en el campo del usuario solo se puedan meter caracteres de la a-zA-Z y numeros, he intentado muchas formas, pero no doy con la solución, gracias de antemano a todos. 😉

    Responder

  40. Simon dice

    Hola Josue, Te escribo haciendo una segunda pregunta, tu respuesta anterior fue muy precisa y me enlazaste a una pagina excelente.
    Pregunta 2: Al enviar el formulario, en vez de que aparezca el mensaje de «enviado correctamente» me gustaria
    que direccione a otra pagina, donde diria: enviado correctamente, muchas gracias.
    Para esto intente remplazar:
    if(mail($dest,$email_subject,$cuerpo,$headers)){
    $result = ‘Email enviado correctamente 🙂‘;

    Por esto otro
    if(mail($dest,$email_subject,$cuerpo,$headers)){
    $result = ‘gracias.html’;

    Pero no funciono. sabes la manera correcta??
    Gracias de antemano

    Responder

  41. Toni dice

    Buenas, grandísimo tutorial, me sirvio mucho. Lo que ahora quería hacer es añadir al formulario un captcha, por el tema de evitar robots spamers y demás… que luego el correo se llena de porquería. Tengo idea de como podría hacerlo caseramente, atribuyendo un valor a la imagen y si introducen el correcto validar el campo… pero imagino que de esa misma manera los robots también podrían descubrir el valor… Eeen fin, que agradecería cualquier aporte que me pudieran brindar..
    Gracias

    Responder

  45. Pedro dice

    Es impresionante lo bien explicados que están tus tutoriales. Yo ya controlo más o menos de HTML, CSS, JQUERY y PHP, pero gracias a tus tutoriales he asentado conocimientos que estaban ‘flotando’ por ahí. Buenísmo trabajo!

    Responder

  46. Pedro dice

    Sólo un apunte. Quita las clases de los input del archivo index.html, ya que dices que sean incluidas en este segundo tutorial, para ser usadas por jquery.

    Un saludo crack!

    Responder

  47. florencia dice

    Hola mirá… probé le formulario. pero le agregué dos campos y cambié el orden.
    al funciones.js lo cambié a:
    $(function() {
    var emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $(«.boton»).click(function(){
    $(«.error»).fadeOut().remove();

    if ($(«.email»).val() == «» || !emailreg.test($(«.email»).val())) {
    $(«.email»).focus().after(‘Ingrese un email correcto’);
    return false;
    }
    if ($(«.telefono»).val() == «») {
    $(«.telefono»).focus().after(‘Ingrese su telefono’);
    return false;
    }
    if ($(«.nombre»).val() == «») {
    $(«.nombre»).focus().after(‘Ingrese su nombre’);
    return false;
    }
    if ($(«.oficina»).val() == «») {
    $(«.oficina»).focus().after(‘Ingrese la oficina’);
    return false;
    }
    if ($(«.asunto»).val() == «») {
    $(«.asunto»).focus().after(‘Ingrese un asunto’);
    return false;
    }
    if ($(«.mensaje»).val() == «») {
    $(«.mensaje»).focus().after(‘Ingrese un mensaje’);
    return false;
    }
    });
    $(«.telefono, .nombre, .oficina, .asunto, .mensaje»).bind(‘blur keyup’, function(){
    if ($(this).val() != «») {
    $(‘.error’).fadeOut();
    return false;
    }
    });
    $(«.email»).bind(‘blur keyup’, function(){
    if ($(«.email»).val() != «» && emailreg.test($(«.email»).val())) {
    $(‘.error’).fadeOut();
    return false;
    }
    });
    });
    ————————————

    y al php del contacto le puse:
    <?php
    if(isset($_POST['boton'])){
    if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
    $error1 = 'Ingrese un email correcto’;
    }else if($_POST[‘telefono’] == »){
    $error2 = ‘Ingrese un telefono’;
    }else if($_POST[‘nombre’] == »){
    $error3 = ‘Ingrese su nombre’;
    }else if($_POST[‘oficina’] == »){
    $error4 = ‘Ingrese la oficina’;
    }else if($_POST[‘asunto’] == »){
    $error5 = ‘Ingrese un asunto’;
    }else if($_POST[‘mensaje’] == »){
    $error6 = ‘Ingrese un mensaje’;
    }else{
    $dest = «info@turse.pe»; //Email de destino
    $email = $_POST[‘email’]; //Email
    $telefono = $_POST[‘telefono’]; //Telefono
    $nombre = $_POST[‘nombre’]; //Nombre
    $oficina = $_POST[‘oficina’]; //Oficina
    $asunto = $_POST[‘asunto’]; //Asunto
    $cuerpo = $_POST[‘mensaje’]; //Cuerpo del mensaje
    //Cabeceras del correo
    $headers = «From: $nombre $email\r\n»; //Quien envia?
    $headers .= «X-Mailer: PHP5\n»;
    $headers .= ‘MIME-Version: 1.0’ . «\n»;
    $headers .= ‘Content-type: text/html; charset=iso-8859-1’ . «\r\n»; //

    if(mail($dest,$email,$telefono,$cuerpo,$headers)){
    $result = ‘Email enviado correctamente 🙂‘;
    // si el envio fue exitoso reseteamos lo que el usuario escribio:
    $_POST[‘email’] = »;
    $_POST[‘telefono’] = »;
    $_POST[‘nombre’] = »;
    $_POST[‘oficina’] = »;
    $_POST[‘asunto’] = »;
    $_POST[‘mensaje’] = »;
    }else{
    $result = ‘Hubo un error al enviar el mensaje 🙁‘;
    }
    }
    }
    ?>

    Email:<input type='text' class='email' name='email' value='’>
    Teléfono:<input type='text' class='telefono' name='telefono' value='’>
    Nombre:<input type='text' class='nombre' name='nombre' value='’>
    Oficina:<input type='text' class='oficina' name='oficina' value='’>
    Asunto:<input type='text' class='asunto' name='asunto' value='’>
    Mensaje:

    ———–

    y al correo me llega.
    en asunto: maildela persona (no me aparece el nombre)
    y dentro del mensaje solo el cuerpo y el telefono…

    probé agregar los campos al php… pero me dice que la linea 210 tira un error que espera que se envien 5 campos y no 7 (q serian los q faltan adjuntar al mensaje.. ) entonces por ahora para que pueda enviar algo le saqué oficina y asunto.

    la pagina es turse.pe/contactos.php si me pudieras dar una mano te lo agradeceria.. ya revisé el código y no sé q puede estar fallando..
    mmuchas gracias y saludos

    Responder

    • Simon dice

      hola florencia, yo soy un novato en el tema y no puedo explicar tan bien como el gran Josue, pero tuve el mismo problema que vos y te comparto mi solucion.
      Aqui el dilema es que en la linea
      if(mail($dest,$email,$telefono,$cuerpo,$headers)){
      $result = ‘Email enviado correctamente 🙂 ‘;
      no se pueden agregar campos, va a ser siempre $dest,$email_subject,$cuerpo,$headers) y en ese orden, para que te llegue mas informacion debes agregar todos los campos que quieras al $cuerpo.
      ejemplo:
      $cuerpo = «Nombre: » . $nombre . «\r\n»;
      $cuerpo .= «Telefono: » . $_POST[‘telefono’] . «\r\n»;
      $cuerpo .= «E-mail: » . $email . «\r\n»;
      $cuerpo .= «Fecha Salida: » . $_POST[‘salida’] . «\r\n»;
      cuerpo .= «Numero Personas: » . $_POST[‘personas’] . «\r\n»;
      $cuerpo .= «Casa: » . $_POST[‘casa’] . «\r\n»;
      $cuerpo .= «Mensaje: » . $_POST[‘mensaje’] . «\r\n»;

      habiendo unas lineas antes hecho:
      $salida = $_POST[‘salida’];
      $personas = $_POST[‘personas’];
      etc.
      entonces te llegara al mail como lo quieres, en este ejemplo
      salida: 16 junio….
      personas: 5
      etc
      saludos
      y suerte

      Responder

      • florencia dice

        Simon! Gracias..se entendió bien aún así me quedan dos problemas: Cambié el código a:

        $dest = «info@turse.pe»; //Email de destino
        $email = $_POST[‘email’]; //Email
        $telefono = $_POST[‘telefono’]; //Telefono
        $nombre = $_POST[‘nombre’]; //Nombre
        $oficina = $_POST[‘oficina’]; //Oficina
        $asunto = $_POST[‘asunto’]; //Asunto
        $mensaje = $_POST[‘mensaje’]; //Asunto
        $cuerpo = «Asunto: » . $asunto . «\r\n»;
        $cuerpo = «Telefono: » . $telefono . «\r\n»;
        $cuerpo = «Nombre: » . $nombre . «\r\n»;
        $cuerpo .= «Email: » . $email . «\r\n»;
        $cuerpo .= «Oficina: » . $_POST[‘oficina’] . «\r\n»;
        $cuerpo .= «Mensaje: » . $_POST[‘mensaje’] . «\r\n»;

        //Cabeceras del correo
        $headers = «From: $asunto – $nombre – $email\r\n»;
        $headers .= «X-Mailer: PHP5\n»;
        $headers .= ‘MIME-Version: 1.0’ . «\n»;
        $headers .= ‘Content-type: text/html; charset=iso-8859-1’ . «\r\n»;

        ————–
        y no me estan llegando dos cosas el TELEFONO y el ASUNTO…
        pero ponele que me importe poner el telefono nomas. o resolver eso. tendra que ver con que es un valor numerico a definir en otro lado?

        y el otro problema es que al mail aparece asi:
        prueba.26.​-.florencia​.miapellido.-.mimail@gmai​l.com
        cuando en realidad supongo qe deberia decir
        prueba 26 florencia miapellido mimail@gmail.com

        o no se. que aparezca un solo campo total lo otro se lo puede agregar al CUERPO. La cosa es que si le saco algo al
        $headers = «From: $asunto – $nombre – $email\r\n»;
        me llega al correo asi
        florencia.miapellido@p3nlhg846.shr.prod.phx3.secureserver.net
        …
        igual lo primero esta resuelto.. pero beuno. Si me podés dar una mano con esas dos cosas estaría agradecida.

        Saludos en este día gris!

        Responder

    • Josue Ochoa dice

      Exactamente como que dijo Simon, el problema esta en que tu variable $cuerpo no esta almacenando las nuevas variables, entonces tienes que hacer esa concatenacion, gracias por el alago Simon pero yo tambien soy novato en esto 🙂

      Responder

  48. peter dice

    hola josue ando implementado tu script pero quiero validar un combo dentro del js
    haber si me puedes apoyar gracias.
    if( $(«.version»).val() == «»){
    $(«.version»).focus().after(«Ingrese un versión»);
    return false;
    }

    Responder

    • peter dice

      listo ya se dejo resolver tks

      if($(«.version option:selected»).val() == «» ){
      $(«.version»).focus().after(«Ingrese su version»);
      return false;
      }

      Responder

  49. gonzo_batman dice

    buenas vi tu tutorial me parece muy bueno , pero hay cosas que no entiendo, no se si es mucha molestia hacer un formulario con una validacion con un usuario especifico y un password especifico sin bases de datos , que cuando se ejecute enviar compruebe el usuario guardado en una variable y tambien el password y si el usuario y el password sean correctos se redireccione a una url especifica

    Responder

  51. jeison dice

    Muy buen tutorial, me parece que este esfuerzo no fue en vano se que le servira a muchos programadores
    gracias por el aporte

    Responder

  52. Victor dice

    Buenas días, no me deja enviar correos es posible que tenga algun error, podrias echarle un vistazo y darme tu opinion.
    Gracias
    <?php
    if(isset($_post['boton'])){
    if($_post['nombre'] == ''){
    $error1 = 'Ingrese su nombre’;
    }else if($_post[‘email’] == » or !preg_match(«/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/»,$_post[‘email’])){
    $error2 = ‘Ingrese un email correcto’;
    }else if($_post[‘asunto’] == »){
    $error3 = ‘Ingrese un asunto’;
    }else if($_post[‘mensaje’] == »){
    $error4 = ‘Ingrese un mensaje’;
    }else{
    $dest = «taller@autoarpa.com»; //Email de destino
    $nombre = $_post[‘nombre’];
    $email = $_post[‘email’];
    $asunto = $_post[‘asunto’]; //Asunto
    $cuerpo = $_post[‘mensaje’]; //Cuerpo del mensaje
    //Cabeceras del correo
    $headers = «From: $nombre $email\r\n»; //Quien envia?
    $headers .= «X-Mailer: PHP5\n»;
    $headers .= ‘MIME-Version: 1.0’ . «\n»;
    $headers .= ‘Content-type: text/html; charset=iso-8859-1’ . «\r\n»; //

    if(mail($dest,$asunto,$cuerpo,$headers)){
    $result = ‘Email enviado correctamente :)’;
    // si el envio fue exitoso reseteamos lo que el usuario escribio:
    $_post[‘nombre’] = »;
    $_post[‘email’] = »;
    $_post[‘asunto’] = »;
    $_post[‘mensaje’] = »;
    }else{
    $result = ‘Hubo un error al enviar el mensaje :(‘;
    }
    }
    }
    ?>

    Tu Nombre:
    Tu Email:
    Asunto:
    Mensaje:

    Responder

  53. Cristian Mora dice

    Hola.
    Lo que sucede es que quiciera que el mensage de error lo puedo colocar en el lugar que o desee pero no se deja siempre tiene una pocisión fija.No se si sera por que estoy usando una parte de tu codigo y lo implemento en otro tipo formulario… No se por que no me sale al lado de la caja … Can you Help me ? Thanks.
    Por sierto me gusto la forma en que explicas.

    Responder

    • Josue Ochoa dice

      Seria muy simple:


      $(".nombre").focus().after("Ingrese su nombre");

      Alli es donde creas el error, si quieres cambiarlo de lugar seria algo asi:

      $(".lugar").after("Ingrese su nombre");
      o
      $(".lugar").html("Ingrese su nombre");

      Responder

  54. Carlos dice

    Buenas noches, un manual muy completo, me está siendo muy útil.
    Estoy tratando de implementar varias cajas de upload para subir ficheros, pero parece que no es soportado.
    Mi solución es hacer el formulario en dos tiempos, de modo que cuando el usuario pincha a enviar datos, después del mensaje verde de validación correcta, hago un window.open a un nuevo .php donde hay otro formulario para la subida múltiple de archivos.

    Es poco práctico desde el punto de vista que te llegan dos emails separados, pero bien.

    Me basé en un script algo viejo,
    http://www.buayacorp.com/archivos/enviar-o-subir-multiples-archivos-adjuntos-al-estilo-gmail/

    Responder

      • Carlos dice

        Hola de nuevo y gracias a ti por compartir.
        ¿Cómo se resuelve cuando la info del email llega con problema de codificación, es decir, no se formatean las tildes, ni las Ñ, ni otros caracteres poco comunes?
        un saludo nueva,ente

        Responder

  55. PJrN dice

    Hola! muy buen tuto, tengo una pequeña duda, he conseguido acomplarlo a mi código y no cargarme la inserción mediante php a la bd.

    Peeero, tengo una pequeña duda, tengo una lista desplegable que no puedo validar, mas bien nose como hacer. El código hace saltar el error si el calor del campo= » «, pero claro, yo en la lista desplegable el valor que tengo es: «selecciona…».

    echo «\n»;
    echo » Selecciona Servidor.. \n»;

    $SQLconsulta_padre=»SELECT * FROM …………………

    Como podría hacer?

    Muchas gracias de antemano y enhorabuena por el tuto.

    Responder

  56. Gustavo dice

    Hola…

    Yo estuve usando el formulario, en un sitio que me funcionó perfectamente.
    Ahora lo coloque en otro, pero me envia los mails sin datos… vacios totalmente…

    que podría ser… ?

    El servidor que Utilizo me ofrece para enviar los mensajes el FormMail.cgi…

    Responder

  57. PJrN dice

    Como podría validar un dropdown list? con campos si me sale pero con listas desplegables no.

    Podrían ayudarme?

    echo “\n”;
    echo ” Selecciona Servidor.. \n”;
    $SQLconsulta_padre=”SELECT * FROM …………………

    Responder

  59. Susana dice

    Hola!! Esta genial, no he encontrado un sitio donde lo explique mejor, pienso aficionarme a tu página.

    Yo no tengo ni idea de formularios, es la primera vez que hago uno y tengo que hacer una pregunta que parecerá idiota, me funciona, he copiado el código pero ¿como recupero los envios? es decir, lo que la gente envíe, ¿que tengo que hacer para verlo?

    Responder

  60. Alejandro Montañez dice

    Tengo una problema:
    Lo que pasa es que el formulario lo estoy llamando mediante AJAX con JQuery, entonces el KeyUp no me esta funcionando. ¿Alguna sugerencia acerca de como hacer «funcionar» ésto? No se como hacerle, ya que si pongo el script en form.php (el archivo llamado por JQuery mediante AJAX que contiene el formulario) el script obviamente no se cargará dentro de la página que realiza la solicitud y no se donde debería colocar el script, ¿Acaso en el success del $.ajax, o donde? Gracias de antemano.

    Responder

  61. Miguel dice

    Que tal, espero que te encuentres exelente, mi pregunta es:
    ¿como le hago para que en error salga en una posicion fija?
    es decir , por ejemplo, que siempre salga en esta posicion, dentrro del div donde se encuentra en formulario o en otro div diferente, gracias, y que tengas exelente dia.

    top: 210%;
    left: 235%;

    Responder

  63. Banshi dice

    Buenas,
    Gracias por el tutorial, me ha gustado mucho la forma de validar el formulario inmediatamente sin tener que enviarlos a otro sitio, previamente.
    Tengo un problemilla, a ver si me puedes ayudar. He usado su código como base y quiero añadir la funcionalidad de que me de error si no hay 9 caracteres escritos. Lo he hecho de la siguiente manera:

    //Para recoger el error
    else if( $(«.telefono»).val() == «» && $(«.telefono»).length<9){
    $(".telefono").focus().after("Ingrese un teléfono de contacto»);
    return false;}
    //Para ocultarlo
    $(«.telefono»).keyup(function(){
    if( $(this).val() != «» && $(this).length==9){
    $(«.error»).fadeOut();
    return false;
    }
    });

    La cosa es que no me da error si escribe menos o más de 9 caracteres, se salta la condición. Como sería la forma correcta? GRacias.

    Responder

  64. Lobo dice

    Hola!

    Excelente tutorial. He implementado el formulario. Va todo ok hasta que he probando las validaciones me doy cuenta de que en IE y Safari una vez pulso enviar me dice que ok! cuando non es así, dado que estoy ejecutando en local. Supongo que puede ser que la funcion mail se ejecuta y no debuelve codigo de error. Pero el email no se envía. Supongo que es cuestión de hacer una comprobación y/o delvolver de alguna forma ese error.

    Muchas gracias por tus consejos.

    Responder

  66. Gackt dice

    Muchas gracias por el tutorial mi estimado Josue lo he estado haciendo y
    funciona correctamente, mas bien queria hacerte una pregunta el
    formulario lo inclui en mi pagina principal para que cargue en un div
    como un contenido externo pero solo me funciona en firefox, en internet
    explore solo carga el html,los estilos y el jquery no muestran su
    funcionamiento. que puedo hacer.

    Responder

  67. Jerick Ordenes Sepúlveda dice

    ¿Es necesaria la validación del lado del servidor si ya se hace con jQuery, o viceversa?

    Responder

  68. Cacho Gomez dice

    Disculpa, una duda… soy nuevísimo en esto (del verbo: antier no sabía de la existencia de JavaScript, literal) , y veo que manejas como «variable» (a juzgar por mis labores deductivas) el $(«.error) … el cual (a diferencia de las otras variables) jamás la declaraste o algo en el «», así que no sé que valor tiene o en que momento alguien le asigna algo. Busqué algo antes de comentar esto y sólo encontré algo parecido que es el método .error() para jQuerys… ¿será algún error de dedo de ustedes? … en caso de que no, ¿me podrías decir que onda con esa variable?, de antemano gracias!

    Responder

  70. Fran Sánchez dice

    Hola Josue. El mejor explicado sin duda.

    Mi duda es que quiero añadir un checkbox para que el usuario tenga que aceptar las condiciones de la página para poder enviar, como requisito. Pero no consigo que valide y continúe.

    ¿Me puedes ayudar?

    Gracias

    Responder

  71. Olivia S dice

    Hola Josue, muchas gracias por toda la información.
    Todo me resulta perfecto, pero el archivo funciones.js, al parecer no surte efecto en la comprobación del formulario.
    Copié el guión tal cual, y al probarlo en el navegador, los mensajes de error no aparecen. Incluí en el index todo lo que indicas, pero no entiendo cuál es la falla… Si sabes qu epuede estar pasando, te agradecería me ayudaras.

    Saludos

    Responder

  72. Leopoldo Iván Villalpando Cruz dice

    esta my bueno tu block el unico pero que le pondria es que el codigo son imagenes!!, pero muy bien!! felicidades por tu block

    Responder

  73. Hillel Garcia dice

    Excelente Tutorial. Sencillo, practico y muy funcional. El paso 2 (validación con Jquery) es el que mas me sirvió. Pues en un sitio con cientos o miles de usuarios no gastas ancho de banda, ya que las validaciones son hechas del lado del cliente (navegador). Gracias por compartir tus conocimientos. Me gustaría saber si tienes algún articulo sobre expresiones regulares?, como la que usas en este articulo para validar la sintaxis del correo electrónico.

    Responder

Retroenlaces

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.