Con el javascript no cambiaremos la apariencia del formulario, pero sí comprobaremos errores de relleno del formulario, y haremos que no se redirija la página una vez enviado. Dentro de la carpeta js, el archivo modernizr.js es éste, por lo que me centraré en script.js.

Básicamente lo que hacemos es comprobar los campos y enviar al servidor vía AJAX el mensaje:

(function(window, document){
// Abreviar document.getElementById
function $(id){
return document.getElementById(id);
}

/*
Variables para evitar acceder al DOM muchas veces,
y abreviar
*/
var form = $('formulario'),
nombre = $('nombre'),
email = $('email'),
mensaje = $('mensaje'),
error = $('error'),
correcto = $('correcto');

// Comprobar e-mail y cadena vacía
function emailVerification(valor){
// Expresión regular para validar el email (http://stackoverflow.com/questions/46155/validate-email-address-in-javascript)
// Yo había hecho una propia, pero no estoy en mi ordenador, y esta parece funcionar bien
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

return regex.test(valor);
}
function estaVacio(valor){
return valor === "";
}

// Función que sucederá cada vez que el formulario se envía
function onsubmit(e){
var data = {
nombre: nombre.value,
email: email.value,
mensaje: mensaje.value
},
errores = [];

e = e || window.event;

// Evitamos redireccionar
if( typeof e.preventDefault === 'function'){
e.preventDefault()
} else {
e.returnValue = false;
}

// comprobamos errores (prefiero mostrarlos normalmente quitando el required)
if( estaVacio(data.nombre)){
errores.push("El campo del nombre no puede estar vacío")
}
if( ! emailVerification(data.email)){
errores.push("Introduce un email válido")
}
if( estaVacio(data.mensaje) ){
errores.push("El mensaje no puede estar vacío")
}

// Si hay errores no enviamos el formulario
if(errores.length){
error.innerHTML = '<ul><li>' + errores.join('</li><li>') + '</li></ul>';
return false;
}

// Si no hay errores, ponemos la lista de errores vacíos
error.innerHTML = '';


// Enviamos el formulario, pero evitamos redireccionar
enviarform(data);

return false;
}

// Función mediante la que enviámos el formulario
function enviarform(data){
var request = createRequest(),
params = convertirObjeto(data);

request.open("POST", 'post.php', false);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function(){
if( request.readyState === 4 ){
if( request.responseText !== "SUCCESS" ){
return error.innerHTML = "<ul><li>Hubo un error al enviar el formulario</li></ul>"
}
// Si está todo correcto mostramos el mensaje y ocultamos el formulario
correcto.innerHTML = "El mensaje se envió correctamente, intentaré responderte lo antes posible";
form.style.display = "none";
}
}
request.send(params);
}

// Creamos una solicitud AJAX
function createRequest(){
// IE7 no implementó bien XMLHttpRequest, así que intentamos usar el nativo
if( window.ActiveXObject ){
try{
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(ex){
alert("Usas un navegador demasiado antiguo (IE5), actualízalo para poder desfrutar de la web")
return null
}
}
return new window.XMLHttpRequest();
}

// Convierte un objeto en una cadena de texto preparada para ser enviada al servidor
function convertirObjeto(obj){
var ret = '',
key, current = 0;
for (key in obj){
ret += ((current === 0 ? '' : '&') + key + '=' + encodeURIComponent(obj[key]) );
current++
}
return ret;
}

/*
Si no está javascript activado y es un navegador moderno, el navegador comprobará los campos por nosotros
Si sí lo está, prefiero comprobarlos y mostrar los errores en conjunto.
*/
nombre.required = email.required = mensaje.required = false;
email.type = "text";


// Añadimos el evento cuando el formulario va a ser enviado
form.addEventListener ? form.addEventListener('submit', onsubmit, false): form.attachEvent('onsubmit', onsubmit)

})(window, document, undefined)

Toda la serie:

8 pensamientos en “Creando un formulario de contacto con PHP y Javascript [4]: el Javascript

  1. Imagen de AdrianAdrian el dijo:

    Buenas tardes Emilio,

    perfecto trabajo el que te has currado explicándo la validación paso a paso. Así si es muy fácil!

    En mi caso tengo un requisito que me está volviendo loco y es que, cuando envíe el formulario me tengo que quedar el la misma página index.php (por ejemplo). Llevo un día dándole vueltas a la cosa pero me falla el JavaScript. tal que me muestra un error en la línea…

    var Modernizr = window.Modernizr,
    soportaRequired = Modernizr.input.required,
    Uncaught TypeError: Cannot read property ‘input’ of undefined
    soportaEmail = Modernizr.inputtypes.email,

    Además al fallarme la compilación del JavaScript, los cambios para que me muestre los comentarios en Inglés no me los pilla y siempre me los muestra en español (cosa que me intriga porque el mensaje en español no lo tengo por ningún lado)
    Te estaría muy pero que muy agradecido si pudieses contestarme.

    Gracias!!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Eso es porque no has incluido Modernizr en la página, pero es igual, porque ahora que lo reviso no era estrictamente necesario. Puedes usar el código de arriba y funcionará.

      Esos mensajes en español te lo muestra porque el JS no se está ejecutando, y por lo tanto se aplica la verificación del navegador (aunque sólo esté disponible en los navegadores modernos).

  2. Imagen de Gonzalo el dijo:

    Muchas gracias por el form, lo estoy usando y me resulta genial. El problema es que cuando envío el correo desde la web (lo hace correctamente) me dirige a una página en blanco y dice Success, en vez de aparecer el cartelito verde que indica que se envió correctamente en la misma página html.

    El DW me dice que hay un herror en la línea 135 que viene a ser la última:
    })(window, document, undefined)

    Lo único que estuve modificando son los css y agregué una caja de texto más llamada “asunto”.

    Muchas gracias desde ya. Un abrazo muy grande y muchos éxitos!!

    • Imagen de Emilio Cobos Álvarez el dijo:

      No tiene ningún error (puedes comprobarlo con jslint, yo no me fiaría mucho de dreamweaver), o abriéndolo en el navegador. Es posible que el asunto sea el problema, y te hayas dejado un paréntesis o algo sin cerrar. Si quieres puedes pasarme el script tal y como lo tienes al formulario de contacto ;).

      Saludos!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Claro, sólo tendrías que añadir el valor al objeto data para actualizar la validación y leerlo en el message.php.

      De todas maneras si no quieres tocar el javascript puedes usar el script.js de la versión con adjunto, que lo cogería y enviaría automáticamente

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.