Artículo que te resume rápidamente la técnica para validar un formulario en el lado del cliente con Javascript. Se comprueba si sus campos son correctos y en caso positivo, se envía el formulario.
Vamos realizar tres ejemplos completos de validación de formularios. Las validaciones se hacen en el propio navegador, con código Javascript, antes de enviarlo. Si hubo algún campo no rellenado o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía el formulario.
Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado.
Alternativas para validar formularios con Javascript
El ejercicio de validar un formulario es uno de los más típicos de Javascript y se puede hacer de diversas maneras, con alternativas de código distintas, que pueden funcionar perfectamente en todos los casos.
Básicamente el proceso es siempre el mismo: acceder campo a campo del formulario y comprobar que los valores introducidos tienen la forma que estamos esperando. En caso que todos los campos de formulario estén correctos, entonces se realiza el envío hacia el servidor donde se tenga que tratar el formulario. La diferencia de enfoques que podemos encontrar en la práctica y que os hemos traído a este artículo varía principalmente en cómo accedemos a los campos del formulario y hacemos en envío, así como en la manera de presentar los mensajes de error a los usuarios.
El código de estas alternativas de validación de formulario en el fondo difiere en poco pero como tienen enfoques distintos podrás ver varios modos de trabajo para la validación con Javascript. Son estilos de acceso al DOM un poco diferentes, ya que las costumbres de codificación, así como el estándar de Javascript han ido cambiando con el tiempo. Comenzaremos por un código más actual, que nos gusta más y que es técnicamente un poco más complejo de mayor versatilidad. Luego veremos una alternativa en la que se muestran mensajes de error de una manera más adecuada. Por último una variante un poco más antigua que se usaba en versiones de Javascript bastante más viejas. Todas funcionan exactamente igual en la práctica y son capaces de ejecutarse actualmente sin problema en cualquier navegador.
Validación capturando el evento submit del formulario
En este primer ejemplo vamos a capturar el evento submit del formulario con Javascript, ya que el momento de enviarlo es el adecuado para validar los datos. Realizaremos la validación y luego, si ha ido todo bien, lo enviaremos.
Código HTML del formulario
Antes de ponernos con la parte del Javascript, veamos el formulario que tenemos:
<form action="/login.php" id="formulario">
<p>
Usuario: <input type="text" name="usuario" id="usuario">
</p>
<p>
Clave: <input type="text" name="clave" id="clave">
</p>
<input type="submit" value="Entrar">
</form>Quiero llamar la atención sobre varias cosas:
- El HTML formulario no tiene nada de especial, que lo pueda hacer diferente de cualquier otro formulario donde no exista validación (tiene un botón de submit normal y no hay código Javascript por ningún lado ni eventos declarados en manejadores en el HTML). Este hecho, que pueda parecer solamente anecdótico es importante, porque tal como está el formulario funcionará perfectamente aunque el navegador tenga deshabilitado Javascript, lo que mejora la accesibilidad. Es la diferencia fundamental con el segundo ejemplo de validación de formulario Javascript que vamos a ver después.
- El formulario tiene un campo "id", en la etiqueta FORM, que nos servirá para acceder a él mediante Javascript.
- Todos los campos que necesitamos validar, también tienen su "id".
El Javascript para la validación del formulario
Antes de pasar a ver el código quiero resumir los pasos que vamos a realizar para esta validación.
- Definiremos un evento "submit" para capturar el instante en el que el usuario enviará el formulario.
- Una vez capturado el evento submit del formulario con Javascript, vamos bloquear el envío, evitando que pueda enviar con datos incorrectos.
- Validaremos todos los campos del formulario.
- Si todos los campos se validan correctamente, entonces realizaremos el envío nosotros mediante Javascript.
Entendidos los pasos que tenemos que realizar, podemos pasar a ver el código. Consta de dos partes, uno para la definición de los eventos de Javascript necesarios para enganchar nuestros majejadores para procesar el envío del formulario y otra parte en la que realizamos la validación propiamente dicha.
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("formulario").addEventListener('submit', validarFormulario);
});
function validarFormulario(evento) {
evento.preventDefault();
var usuario = document.getElementById('usuario').value;
if(usuario.length == 0) {
alert('No has escrito nada en el usuario');
return;
}
var clave = document.getElementById('clave').value;
if (clave.length < 6) {
alert('La clave no es válida');
return;
}
this.submit();
}Comenzamos definiendo un manejador para el evento "DOMContentLoaded". Este manejador nos asegura que el resto del código que se va a ejecutar se realice cuando verdaderamente el navegador esté listo para ejecutarlo.
Luego realizamos un manejador para el evento "submit" del formulario. Como manejador para este segundo evento indicamos la función "validarFormulario()". Es interesante aquí el acceso al DOM de los elementos de la página, que estamos haciendo con "document.getElementById()" y enviando su identificador (atributo "id") como parámetro. Este es otro de los detalles que distinguen a este código del otro más sencillo que veremos más adelante en este artículo.
La función validarFormulario() recibe como parámetro el objeto evento. Esto es algo que ocurre con todos los maneadores de eventos Javascript. Este objeto "evento" nos sirve para hacer diversas cosas, como por ejemplo detener el comportamiento por defecto de un evento. Como se trata del evento submit, el comportamiento predeterminado es justamente el envío del formulario, que hemos detenido con la instrucción "evento.preventDefault()".
A continuación vamos realizando el acceso a cada elemento del formulario, para estudiar si son correctos o no. En el caso que no lo sean, mostramos un mensaje en una caja de alerta y luego salimos de la función con "return". Ese return permite que, una vez que se ha detectado un error, no se siga ejecutando el código de la función.
Por último, si no se salió por ninguna de las validaciones incorrectas, entonces enviamos el formulario. Esto lo realizamos con el método submit() del formulario. Como estamos dentro de un manejador de evento definido por el formulario, la variable "this" corresponde con el propio formulario. Por ello, el envío lo podemos realizar con un simple "this.submit()".
Eso es todo. Espero que hayas podido entender las bases sobre esta alternativa para la validación del formulario. Ahora te vamos a presentar una diferente, más básica, que quizás también te guste y con la que podrás seguir aprendiendo.
Cómo mostrar los mensajes de validación de una manera más amistosa
Vamos a realizar un nuevo ejemplo de validación de formularios en el que queremos mostrar de una manera un poco más idónea la presentación de los mensajes de error para el usuario. No se trata de hacer las cosas demasiado complejas, sino aportar un poco de usabilidad, ya que los mensajes en cajas de "alert" que hemos usado en la anterior propuesta son bastante poco amistosos.
Las cosas que ya sabes con respecto a la validación las vamos a aplicar tal cual las hemos explicado ya. Solamente mostraremos los mensajes manipulando el contenido de un elemento de la página para que los errores aparezcan de una manera visible y fácil de identificar.
Código HTML con el formulario
Empezamos viendo el código HTML del formulario que vamos a validar. Como hemos dicho antes, no tiene nada de especial con lo que respecta a un formulario HTML normal. Luego le daremos la funcionalidad para la validación con Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validar</title>
</head>
<body>
<form id="formulario" action="pagina.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<br>
<label for="categoria">Categoría:</label>
<select id="categoria" name="categoria">
<option value="">Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
<br>
<input type="checkbox" id="terminos" name="terminos">
<label for="terminos" class="labelCheck">Acepto los términos y condiciones</label>
<br>
<button type="submit">Enviar</button>
<p id="mensajeError"></p>
</form>
<script src="./src/index.js"></script>
</body>
</html>
Lo que sí tiene de relevante en relación al formulario anterior es un párrafo donde vamos a volcar los mensajes de error si las validaciones fallan.
<p id="mensajeError"></p>
Simplemente hemos indicado un atributo id en el párrafo para poder referirnos a él mediante Javascript. Además, hay un par de detalles extra que podemos comentar:
- El párrafo que muestra los errores está al lado del botón de submit, de modo que resultará muy fácil de ver los errores cuando ocurran porque lo más seguro es que el usuario esté viendo el botón cuando lo pulse.
- Con CSS deberíamos aplicar un poco de estilo a este párrafo para que muestre el contenido en rojo, así destacará más el error. Esa parte no la vamos a ver.
Código Javascript para la validación del formulario
Ahora vamos a ver el código Javascript para hacer esta validación de formulario. Ademas. como el formulario tiene más campos, nos vendrá bien para poder ver cómo validar elementos como los select o los checkbox.
document.addEventListener("DOMContentLoaded", function () {
const formulario = document.getElementById('formulario');
const mensajeError = document.getElementById('mensajeError');
formulario.addEventListener('submit', function (evento) {
evento.preventDefault(); // Previene el envío del formulario para poder validarlo con Javascript
let nombre = document.getElementById('nombre').value;
let email = document.getElementById('email').value;
let categoria = document.getElementById('categoria').value;
let terminos = document.getElementById('terminos').checked;
// Validación de los campos
if (nombre.trim() === '') {
mensajeError.innerText = 'El campo nombre no puede estar vacío.';
return;
}
if (email.trim() === '') {
mensajeError.innerText = 'El campo email no puede estar vacío.';
return;
}
if (!validarEmail(email)) {
mensajeError.innerText = 'El formato del email no es válido.';
return;
}
if (categoria === '') {
mensajeError.innerText = 'Debes seleccionar una categoría.';
return;
}
if (!terminos) {
mensajeError.innerText = 'Debes aceptar los términos y condiciones.';
return;
}
// Si todo está correcto, se puede proceder a enviar el formulario o hacer alguna otra acción
mensajeError.innerText = '';
// alert('Formulario enviado con éxito!');
formulario.submit(); // Descomentar esta línea para permitir el envío del formulario
});
function validarEmail(email) {
const 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());
}
});
Como puedes comprobar, en lugar de enviar los mensajes por cajas alert, lo que hacemos es volcar los errores como contenido del párrafo, con la propiedad innerText del elemento de error.
Accedemos al elemento de error así:
const mensajeError = document.getElementById('mensajeError');
Luego volcamos mensajes de error en este elemento de la siguiente forma:
mensajeError.innerText = 'Debes aceptar los términos y condiciones.';
Es la única diferencia representativa con lo que hemos visto en el anterior ejemplo. Espero que te sirva para poder afianzar los conocimientos y de paso aprender a mostrar los mensajes de error de una manera más apropiada.
Validación de formulario con acceso a campos por su nombre
Ahora vamos a ver un ejemplo de validación un poco más sencillo, con un estilo de codificación un poco más antiguo y que actualmente nos gusta menos, pero que puede ayudarte si estás aprendiendo, para darte cuenta que podemos hacer las cosas mediante formas bastante distintas y obtener el mismo resultado.
En este ejemplo se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde deben haber seleccionado un valor.
Recuerda que en Javascript existen diversas vías para validar formularios. En este ejemplo se han querido hacer las cosas fáciles para personas que están iniciando.
El código del formulario
A la hora de construir un formulario que se desea validar, se realiza con un HTML igual que un formulario que se fuera a enviar sin validación. En nuestro ejemplo usaremos el DOM para acceder a los campos a partir de la jearquía de objetos, a partir del documento y del objeto formulario. En otros ejemplos en Internet podrás ver que para acceder a los campos se usan identificadores (atributos "id"). El resultado en realidad es el mismo.
El formulario con el que vamos a trabajar es el siguiente:
<form name="fvalida">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name=interes>
<option value="Elegir">Elegir
<option value="Comercial">Contacto comercial
<option value="Clientes">Atención al cliente
<option value="Proveedores">Contacto de proveedores
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>
Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:
- El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript.
- El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo fue correcto.
Función Javascript para validar el formulario
Ahora veremos la función que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y abandona la función retornando el valor 0.
Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del formulario.
Veamos la función entera, aunque luego la expliquemos por partes.
function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return 0;
}
//valido la edad. tiene que ser entero mayor que 18
edad = document.fvalida.edad.value
edad = validarEntero(edad)
document.fvalida.edad.value=edad
if (edad==""){
alert("Tiene que introducir un número entero en su edad.")
document.fvalida.edad.focus()
return 0;
}else{
if (edad<18){
alert("Debe ser mayor de 18 años.")
document.fvalida.edad.focus()
return 0;
}
}
//valido el interés
if (document.fvalida.interes.selectedIndex==0){
alert("Debe seleccionar un motivo de su contacto.")
document.fvalida.interes.focus()
return 0;
}
//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y se sale de la función devolviendo el valor 0.
La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es mayor que 18. Para hacer esta validación nos vamos a apoyar en una función que ya hemos visto en otro artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario. Esa función devuelve un string vació en caso de que no sea un entero y el propio entero, si es que lo era.
Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la función es un string vacío. En ese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sitúa el foco y se sale de la función.
En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario -entonces el valor sería mayor o igual que 18-, se continúa con las comprobaciones.
Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opción menos la primera. Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el índice seleccionado en el menú desplegable. El primer campo tiene el índice 0, el segundo el índice 1...
Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario y se sale de la función.
Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea.
Para enviar el formulario se hace una llamada al método submit() de dicho formulario.
Conclusión a la validación de formularios con Javascript
Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos conocimientos, ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo, siempre que sigamos un esquema similar para cada uno de los campos.
Recuerda que en DesarrolloWeb.com tienes mucho material para complementar y expandir estas explicaciones. Tenemos un manual completo dedicado al trabajo con formularios. Pero también encontrarás muchos otros manuales para hacer validaciones apoyado en librerías y frameworks Javascript avanzados. Te recomendamos acceder a la sección dedicada a Javascript.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...