Cómo validar formularios en JavaScript (incluye ejemplos)

Cuando tienes un sitio web, es inevitable el uso de formularios. Quieres que tus visitantes te envíen sus datos de contacto, recibir retroalimentación acerca de tus contenidos y generar una base de suscriptores, entre muchos objetivos más.

En el manejo de formularios, JavaScript sirve para validar los datos capturados por los usuarios. Esta notificación les ayuda a saber si introdujeron la información correcta, así que mejora la experiencia en el llenado de los datos. Además, aligera la carga en el servidor, ya que al no tener los datos correctos presentaría un error.

Existen tantas comprobaciones como datos requeridos del formulario. Aquí te mostraremos algunos casos usuales.

Cómo validar formularios en JavaScript

El código JavaScript básico necesario para incorporar la validación a un formulario es :

<form action="" method="" id="" name="" onsubmit="return validacion()"> ...</form>

La función validacion() se puede escribir así:

function validacion() { if (primera comprobación o validación en algún campo del formulario) { // Si esta comprobación no se cumple... alert('[ERROR] El campo del formulario debe tener un valor de...'); return false; } else if (Segunda comprobación o validación en algún campo del form) { // Si esta comprobación no se cumple... alert('[ERROR] El campo del formulario debe tener un valor de...'); return false; } ... else if (Tercera comprobación o validación en algún campo del form) { // Si esta comprobación no se cumple... alert('[ERROR] El campo del formulario debe tener un valor de...'); return false; }//etc // Si esta comprobación se encuentra correcta se procederá a ejecutar el envío de formulario al servidor // La validación del formulario es correcta retornamos el valor true return true;}

Al igual que otros eventos como onclick, onkeypress o upkeypress, el evento onsubmit varía su comportamiento en función del valor que se devuelve.

Si el evento onsubmit devuelve el valor true, el formulario se enviará normalmente. En cambio, si el evento onsubmit devuelve false, el formulario no se envía y muestra una alerta con el error o la indicación de dónde la comprobación no se superó.

El punto clave consiste en comprobar todos los campos y cada uno de los elementos del formulario. Por consiguiente, como primer paso es definir el evento onsubmit del formulario como:

onsubmit="return validacion()"

En la función validacion() se comprueban todas las condiciones impuestas por la aplicación; principalmente, una por cada campo del formulario. Cuando no se cumple una comprobación, se retorna false y, por tanto, el formulario no se envía. Si se llega al final de la función, entonces todas las comprobaciones se han cumplido correctamente, por lo que se retorna true y el formulario se envía.

En el código del ejemplo anterior se muestran mensajes mediante la función alert() indicando el error producido. Las aplicaciones web con un alto grado de diseño muestran cada mensaje de error al lado del campo del formulario y también suelen mostrar un mensaje o un popup principal indicando que contiene errores. La mayoría de estos elementos gráficos son interpretados con hojas de estilo que se muestran dependiendo del estado del error o de la comprobación correcta.

Teniendo la estructura definida de la función validacion(), se debe añadir a esta función el código correspondiente a todos los campos que se capturan en el formulario. Estas son algunas de las validaciones más habituales de los campos.

Ejemplo de cómo validar una dirección de correo en un formulario con JavaScript

Tiene como objetivo obligar al usuario a introducir una dirección de correo con un formato válido. Por tanto, lo que se comprueba es que la dirección parezca válida. La condición JavaScript consiste en:

valor = document.getElementById("campo").value;if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) { return false;}

La comprobación se realiza mediante las expresiones regulares (regex). Hay que tener en cuenta que valida las más usuales, pero no las que tengan una configuración distinta.

Ejemplo de cómo validar un campo de texto obligatorio en un formulario con JavaScript

La condición en JavaScript para validar un campo de texto obligatorio se puede indicar como:

valor = document.getElementById("campo").value;if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { return false;}

Para que esta comprobación resulte correcta y tenga un texto obligatorio, se comprueba que el valor introducido sea válido, que el número de caracteres introducidos sea mayor que cero y que no haya solamente espacios.

Null indica que no hay ningún valor, lo cual se indicará si la longitud del mismo es igual a cero.

(/^\s+$/.test(valor)) comprueba que el valor introducido no solo esté formado por espacios en blanco. Esta comprobación se basa en el uso de regex, nuevamente. Por lo tanto, solo necesitas copiar literalmente esta condición, poniendo especial cuidado en no modificar ningún carácter de la expresión para que esta pueda ser funcional.

Ejemplo de cómo validar un campo de texto con valores numéricos en un formulario con JavaScript

La condición JavaScript para una respuesta que requiere valores numéricos consiste en:

valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}

La función isNaN facilita la validación, pues tiene en cuenta los signos, decimales y demás.

Ejemplo de cómo validar que se ha seleccionado un elemento de lista en un formulario con JavaScript

Este ejemplo fuerza a que el usuario seleccione un elemento de una lista desplegable:

indice = document.getElementById("opc").selectedIndex;if( indice == null || indice == 0 ) { return false;}

<select id="opc" name="opc"> <option value="">---Seleccione---</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>

Realizando el uso de la propiedad selectedIndex, se comprueba si el índice del select seleccionado es válido y además es diferente de cero. La primera opción de la lista (Seleccione) es solo la instrucción, por lo que no se permite el valor del índice cero que nos proporciona esta propiedad selectedIndex.

Ejemplo de cómo validar una fecha en un formulario con JavaScript

Las fechas suelen ser los campos de formulario más complicados de validar por la cantidad de formas diferentes en las que se pueden introducir. Nuevamente, usaremos las expresiones regulares (regex) validar la fecha en formato dd/mm/aa.

valor = document.getElementById("campo").value;if ( !(/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[1-9]|2[1-9])$/.test(valor)) { return false;}

Ejemplo de cómo validar un número de teléfono en un formulario con JavaScript

Este código indica que un número (como el de teléfono) tiene diez dígitos de forma consecutiva:

valor = document.getElementById("campo").value;if( !(/^\d{10}$/.test(valor)) ) { return false;}

Una vez más, la condición de JavaScript se basa en el uso de expresiones regulares (regex), que comprueban si el valor indicado es una sucesión de diez números consecutivos. 

Estos son ejemplos de expresiones regulares que se pueden utilizar para otros formatos de número de teléfono:

Ejemplo de cómo validar que un checkbox ha sido seleccionado en un formulario con JavaScript

Para validar un checkbox, puede añadirse este código:

elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}

Para validar más de un checkbox:

form = document.getElementById("form");for(var i=0; i<form.elements.length; i++) { var elemento = form.elements[i]; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}

Como podemos observar, en estas validaciones el uso de las expresiones regulares (regex) es de lo más común. No dudes en contar con la asesoría de un experto o experta que pueda optimizar la validación de tus formularios y generar más expresiones conformes con los campos que necesitas.