Los formularios son omnipresentes en las aplicaciones web. Algunas aplicaciones usan formularios para recopilar datos para registrar usuarios y proporcionar una dirección de correo electrónico. Otros los utilizan para realizar transacciones en línea para facilitar una experiencia de compra.

Puedes usar algunos formularios web para solicitar un préstamo de automóvil nuevo, mientras que usarás otros para pedir pizza para la cena. Por lo tanto, es importante que los datos recopilados de esos formularios se limpien, se formateen correctamente y no contengan ningún código malicioso. Este proceso se denomina validación de formularios.

Necesitamos la validación del formulario cada vez que aceptamos la entrada del usuario. Debemos asegurarnos de que los datos ingresados estén en el formato correcto, se encuentren dentro de un rango válido de datos (como para los campos de fecha) y no contengan código malicioso que pueda dar lugar a inyecciones SQL. Los datos mal formados o faltantes también pueden hacer que la API arroje errores.

¿Cuáles son los diferentes tipos de validaciones de formularios?

La validación del formulario puede ocurrir en el lado del cliente y en el lado del servidor.

La validación del lado del cliente se produce utilizando atributos HTML5 y JavaScript del lado del cliente.

Es posible que hayas notado en algunos formularios, tan pronto como ingresas una dirección de correo electrónico inválida, el formulario muestra el error "Ingrese un correo electrónico válido". Este tipo inmediato de validación generalmente se realiza a través de JavaScript del lado del cliente.

En otros casos, es posible que hayas notado cuando completas un formulario e ingresas detalles como una tarjeta de crédito, puede mostrar una pantalla de carga y luego mostrar un error "Esta tarjeta de crédito no es válida".

Aquí, el formulario realizó una llamada al código del lado del servidor y devolvió un error de validación después de realizar verificaciones adicionales de la tarjeta de crédito. Este caso de validación en el que se realiza una llamada del lado del servidor se denomina validación del lado del servidor.

¿Qué datos se deben validar?

La validación del formulario es necesaria cada vez que aceptas datos de un usuario. Esto puede incluir:

1. Validando el formato de campos como dirección de correo electrónico, número de teléfono, código postal, nombre, contraseña.

2. Validando campos obligatorios.

3. Verificación del tipo de datos, como cadenas contra números, para campos como el número de seguro social.

4. Asegurarte de que el valor ingresado sea un valor válido, como país, fecha, etc.

Cómo configurar la validación del lado del cliente

En el lado del cliente, la validación se puede realizar de dos formas:

1. Utilizando la funcionalidad HTML5

2. Utilizando JavaScript

Cómo configurar la validación con la funcionalidad HTML5

HTML5 proporciona una serie de atributos para ayudar a validar los datos. A continuación, se muestran algunos casos de validación comunes:

  • Hacer que los campos sean obligatorios usando required
  • Restringir la longitud de los datos:
    - minlength, maxlength: para datos de texto
    - min y max para el valor máximo del tipo número
  • Restringir el tipo de datos usando type:
    <input type="email" name="multiple" />
  • Especificar patrones de datos usando pattern:
    Especifica un patrón de expresiones regulares que los datos ingresados del formulario deben coincidir.

Cuando el valor de entrada coincide con la validación HTML5 anterior, se le asigna un pseudo-clase :valid, e :invalid si no lo hace.

Probemos con un ejemplo:

<form>
<label for="nombre"> Nombre: </label>
<input type="text" name="nombre" id="nombre" required maxlength="45" />
<label for="apellido"> Apellido: </label>
<input type="text" name="apellido" id="apellido" required maxlength="45" />
<button>Enviar</button>
</form>
Validación de formulario de lado de cliente para campos requeridos utilizando atributos HTML5

Enlace a JSFiddle (inglés)

Aquí tenemos dos campos obligatorios: nombre y apellido. Prueba este ejemplo en JSFiddle. Si omites cualquiera de estos campos y presionas enviar, recibirás un mensaje, "Por favor complete este campo". Esta es la validación mediante HTML5 incorporado.

Cómo configurar la validación usando JavaScript

Al implementar la validación de formularios, hay algunas cosas a considerar:

1. ¿Qué se define como datos "válidos"? Esto ayuda a responder preguntas sobre el formato, la longitud, los campos obligatorios y el tipo de datos.

2. ¿Qué sucede cuando se ingresan datos inválidos? Esto ayudará a definir la experiencia del usuario de la validación: ya sea para mostrar un mensaje de error en-línea o en la parte superior del formulario, ¿cuán detallado debe ser el mensaje de error?, ¿el formulario debe enviarse de todos modos?, ¿debería haber analíticas para rastrear el formato inválido de datos?, etc.

Puedes realizar la validación de JavaScript de dos formas:

1. Validación en-línea usando JavaScript.

2. API de validación de restricciones HTML5

Validación en-línea usando JavaScript

<form id="form">
  <label for="nombre"> Nombre* </label>
  <input type="text" name="nombre" id="nombre" />
  <button id="enviar">Enviar</button>

  <span role="alert" id="nombreError" aria-hidden="true">
    Ingrese su nombre, por favor
  </span>
</form>

const enviar = document.getElementById("enviar");

enviar.addEventListener("click", validar);

function validar(e) {
  e.preventDefault();

  const campoNombre = document.getElementById("nombre");
  let valido = true;

  if (!campoNombre.value) {
    const nombreError = document.getElementById("nombreError");
    nombreError.classList.add("visible");
    campoNombre.classList.add("invalido");
    nombreError.setAttribute("aria-hidden", false);
    nombreError.setAttribute("aria-invalid", true);
  }
  return valido;
}

#nombreError {
  display: none;
  font-size: 0.8em;
}

#nombreError.visible {
  display: block;
}

input.invalido {
  border-color: red;
}

Enlace a JSFiddle(inglés).

En este ejemplo, verificamos los campos obligatorios usando JavaScript. Si un campo obligatorio no está presente, usamos CSS para mostrar el mensaje de error.

Las etiquetas Aria se modifican en consecuencia para señalar un error. Al usar CSS para mostrar/ocultar un error, estamos reduciendo la cantidad de manipulaciones DOM que necesitamos realizar. El mensaje de error se proporciona en contexto, lo que hace que la experiencia del usuario sea intuitiva.

API de validación de restricciones HTML5

Los atributos HTML required y pattern pueden ayudar a realizar una validación básica. Pero si deseas una validación más compleja o deseas proporcionar mensajes de error detallados, puedes utilizar la API de validación de restricciones.

Algunos métodos proporcionados por esta API son:

  1. checkValidity
  2. setCustomValidity
  3. reportValidity

Las siguientes propiedades son útiles:

  1. validity
  2. validationMessage
  3. willValidate

En este ejemplo, validaremos utilizando métodos incorporados de HTML5, como required y length, junto con la API de validación de restricciones para proporcionar mensajes de error detallados.

<form>
<label for="nombre"> Nombre: </label>
<input type="text" name="nombre" required id="nombre" />
<button>Enviar</button>
</form>

const campoNombre = document.querySelector("input");

campoNombre.addEventListener("input", () => {
  campoNombre.setCustomValidity("");
  campoNombre.checkValidity();
  console.log(campoNombre.checkValidity());
});

campoNombre.addEventListener("invalid", () => {
  campoNombre.setCustomValidity("Por favor, ingrese su nombre.");
});

Enlace a JSFiddle(inglés)

No olvides la validación del lado del servidor

La validación del lado del cliente no es la única verificación de validación que debes realizar. También debes validar los datos recibidos del cliente en el código del lado del servidor para asegurarte de que los datos coincidan con lo que esperas que sean.

También puedes utilizar la validación del lado del servidor para realizar verificaciones de la lógica empresarial que no deberían estar en el lado del cliente.

Mejores prácticas de validación de formularios

  1. Siempre ten validaciones del lado del servidor, ya que los actores malintencionados pueden eludir la validación del lado del cliente.
  2. Proporciona mensajes de error detallados en contexto con el campo que produjo el error.
  3. Proporciona un ejemplo de cómo deberían verse los datos en caso de un mensaje de error, como "El formato del correo electrónico no coincide - prueba@ejemplo.com".
  4. Evita el uso de páginas de error único que impliquen redireccionamiento. Esta es una mala experiencia de usuario y obliga al usuario a volver a una página anterior para corregir el formulario y perder el contexto.
  5. Marca siempre los campos obligatorios.

¿Interesado en más tutoriales y artículos como este? Inscríbete al boletín de noticias, o sigue a Shruti en Twitter

Traducido del artículo de Shruti Kapoor - Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code