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>