Formularios JavaScript: ¿Cómo validarlos?

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

Si te ha gustado este articulo debes de echar un vistazo al de 6 ejemplos útiles de Javascript para mejorar los formularios.

Publicado el 22/04/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.