Saltar la navegación

Ejemplo JavaScript

Asignación de eventos

En lugar de incluir los eventos JavaScript en el HTML, vamos a separar completamente el contenido (HTML) del comportamiento introducido mediante JavaScript:

window.onload = function(){
	document.getElementById("contactForm").onsubmit = function(){
        return validarFormulario();
    }
}

En lugar de:

<form id="contactForm" action="" method="post" onsubmit="return validarFormulario()">

De igual forma, asignamos otros eventos:

  • Pedimos confirmación antes de restablecer los datos del formulario (evento "onreset").
  • Eliminamos la clase CSS "error" de los campos de formulario cuando el foco está en ellos (evento "onfocus").
  • Comprobamos el valor del campo al salir de él, por si hubiese que añadir la clase "error" (evento "onblur").

DOM (nuevos elementos)

En el ejemplo original, la etiqueta en la que se muestra el mensaje "Por favor, rellena todos los campos" está en el HTML. Ahora vamos a crearla con JavaScript:

var mensajeDeError = document.createElement("SPAN");
mensajeDeError.id = "errores";
mensajeDeError.innerHTML = "Por favor, rellena todos los campos";
var botonDeEnvio = document.getElementById("enviar");
botonDeEnvio.parentNode.insertBefore(mensajeDeError, botonDeEnvio.nextSibling);

En lugar de:

<span id="errores">Por favor, rellena todos los campos</span>

Descarga el ejemplo completo (HTML + JavaScript)

No olvides que...

  • Puede haber más de una forma de hacer lo mismo.
  • La validación del ejemplo es muy sencilla. Se podría mejorar, por ejemplo, comprobando si el email es válido, o incluyendo un campo para que el usuario introduzca de nuevo el email y evitar posibles errores en su escritura. Se podría ir comprobando, según se escribe, si el email es igual al escrito en un primer momento (haciendo uso del evento "onkeyup").
  • En estos ejemplos se valida en cliente (con JavaScript), pero no debemos prescindir de la validación en el servidor (con un lenguaje de servidor como PHP).