Validación de los formularios Javascript

La validación de los datos que los usuarios introducen en las aplicaciones es una tarea tan habitual como necesaria en el mundo del desarrollo web. Las validaciones se pueden realizar tanto en el lado del cliente o del servidor, aunque en última instancia siempre debemos confiar en el servidor, ya que el código del cliente dependerá de la configuración del usuario.

Podría ser que un usuario no tenga activado Javascript, o que su navegador no sea compatible con nuestro código, por ejemplo. En esos casos las validaciones en el navegador no podrían realizarse. Sin embargo, el servidor nos asegura que el código que tengamos se va a ejecutar sí o sí, y es en un entorno único, donde podemos probar el código con la certeza de que siempre va a funcionar tal cual.

El evento de envío del formulario

Por tanto, las validaciones en Javascript deben realizarse más que nada para mejorar la experiencia del usuario. De modo que no se necesite enviar el formulario si realmente están faltando datos o no son correctos, aportando errores de una manera amistosa y ágil.

Para comenzar a aprender a validar formularios debemos centrarnos primero en la etiqueta <form> y el evento de envío. La etiqueta del formulario tendrá exactamente la misma estructura que siempre, con un detalle extra: un identificador para poder referirnos a ella desde Javascript.

<form action="enviar.php" method="post" id="mi_formulario">

Podemos fijarnos en que, tal cual está, aunque el usuario no disponga de Javascript el formulario se enviaría comúnmente. Es importante este detalle, ya que las validaciones confiables están en el servidor, debemos asegurarnos que el código Javascript no bloquea un funcionamiento correcto de la página aunque no se llegue a ejecutar.

Ahora, con Javascript podemos detectar el momento exacto de envío del formulario, mediante el evento submit, de esta manera.

document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById('mi_formulario').addEventListener('submit',
manejadorValidacion)
});

En realidad aquí estamos usando dos tipos de eventos distintos. Para cada uno de ellos hemos asociado un manejador de evento con el método addEventListener(). El manejador de evento no es más que una función que se ejecutará cuando se produzca tal evento.

  • El evento «DOMContentLoaded» que hemos asociado al objeto document: sirve para detectar cuando el navegador ya ha procesado todos los elementos de la página, momento en el cual ya somos capaces de acceder al formulario con seguridad.
  • El evento «submit» que hemos asociado al formulario, que se dispara en el momento que el usuario envíe el formulario. Como manejador del evento submit hemos indicado el nombre de una función llamada «manejadorValidacion», cuyo código nos servirá para realizar las correspondientes validaciones.

Detener el envío del formulario para realizar validaciones

El siguiente paso consiste en detener mediante Javascript el envío del formulario. Es importante este punto porque, si no lo hacemos, el formulario se enviaría normalmente. Una vez detenido, se pueden realizar las validaciones y, si son correctas, enviaríamos el formulario desde Javascript.

Para detener ese envío usamos el objeto evento que recibimos por parámetro cualquier función manejadora de eventos.

function manejadorValidacion(e) {
 e.preventDefault();
 console.log('Validando formulario!');
}

En el objeto evento disponemos del método preventDefault() que realiza la parada del comportamiento predeterminado del evento correspondiente, en este caso el envío del formulario.

Realizar validaciones

A partir de aquí podemos realizar todas las validaciones que sean necesarias. Vamos a ver un par de ejemplos, con un formulario sencillo.

<form action="enviar.php" method="post" id="mi_formulario"> <p>
Nombre: <input type="text" name="nombre"> </p>
<p>
Email: <input type="text" name="email">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>

Por ejemplo, podemos comprobar que el usuario haya escrito algo en el campo «nombre» y que el email introducido esté correctamente escrito.

if(this.querySelector('[name=nombre]').value == '') { 
  console.log('El nombre está vacío');
}

El código anterior permite acceder al elemento de formulario con el atributo «name» igual a «nombre». Si lo que hay escrito es la cadena vacía, entonces se ejecutará el código de dentro del if.

Ahora podemos comprobar si el e-mail es correcto, sintácticamente. Esta tarea es un poco más compleja, ya que la validación debe atender a bastantes detalles sobre la cadena del campo email. Por ello nos apoyaremos en una función extra.

if(! validateEmail(this.querySelector('[name=email]').value)) { 
  console.log('El email no es válido');
}

La función de validación del email «validateEmail» la podemos ver en el código final de este artículo. La podrás también conseguir haciendo una búsqueda en Google, por ejemplo este link nos ofrece una aceptada por la comunidad que es la que hemos usado nosotros: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript

Flujo completo de validación

Ya solo nos quedaría completar el ejemplo con un par de detalles importantes:

  • Mostrar mensajes al usuario de manera amistosa.
  • Enviar el formulario si todas las validaciones se ejecutan positivamente.

Estos últimos detalles los vamos a ver ya sobre el código completo de nuestra función de validación.

function manejadorValidacion(e) {
 e.preventDefault();
 var msg = document.getElementById('msg');
 msg.innerText = '';
if(this.querySelector('[name=nombre]').value == '') { 
  msg.innerText = 'Debes escribir un nombre'; 
  return;
}
if(! validateEmail(this.querySelector('[name=email]').value)) {  
  msg.innerText = 'Debes escribir un email válido';
  return;
 }
 this.submit();
}

La variable msg creada nos ofrece una referencia a un elemento de la página donde mostraremos los errores de validación. Al principio de la función se hace msg.innerText = »; para borrar cualquier error al validar intentos de envío anteriores. Cuando detectamos un error de validación podemos hacemos dos cosas:

  • Mostrar el correspondiente error en el elemento de los mensajes de feedback.
  • Detener la ejecución de la función con un «return».

Solamente si no se ha detenido la función, porque todas las validaciones hayan sido correctas, se llegará a la última línea, donde encontramos «this.submit()». La variable this, como te imaginarás, es una referencia al formulario que se está validando. El método submit() produce el envío del formulario.

Ya tenemos el flujo completo de validación. Os indicamos el código completo del ejemplo para aclarar posibles dudas.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Ejemplo de validación Javascript</title>
</head>
<body>
<form action="enviar.php" method="post" id="mi_formulario"> <p>
Nombre: <input type="text" name="nombre">
</p>
<p>
Email: <input type="text" name="email">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>

<div id="msg"></div>

<script>
 document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('mi_formulario').addEventListener('submit', 
manejadorValidacion)
});

function manejadorValidacion(e) {
e.preventDefault();
var msg = document.getElementById('msg');
msg.innerText = '';
if(this.querySelector('[name=nombre]').value == '') {
console.log('El nombre está vacío');
msg.innerText = 'Debes escribir un nombre';
return;
}
if(! validateEmail(this.querySelector('[name=email]').value)) 
  { console.log('El email no es válido');
  msg.innerText = 'Debes escribir un email 
  válido'; return;
 }
 this.submit();
}

function validateEmail(email) {
  var re =
/^(([^<>()\[\]\\.,;:\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 re.test(String(email).toLowerCase());
 }
</script>
</body>
</html>

Hemos realizado un par de validaciones sencillas. Buscando en Internet encontrarás validaciones para todo tipo de campos, textareas, select, botones de radio o checkbox, etc. Ya solo es saber lo que deseamos validar y crear el correspondiente código. El flujo de la validación será siempre el mismo.

Por último queremos insistir en que, tal como hemos mencionado, las validaciones Javascript deben ser complementarias a las que realices del lado del servidor. En futuros artículos os explicaremos cómo validar formularios en diferentes lenguajes del lado del servidor.