Artículo original escrito por: Shruti Kapoor
Artículo original: Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code
Traducido y adaptado por: Sil Zubikarai

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

Puedes usar algunos formularios web para solicitar  un  préstamo de automóvil nuevo, mientras que usaras otros para pedir una pizza para la cena. Por lo tanto, es importante que los datos recolectados de estos formularios hayan sido limpiados, estén en el  formato correcto, y carezcan de cualquier código malicioso. Este proceso es llamado validación de formularios.

Necesitamos validación de formulario en cualquier momento que estamos aceptando una entrada de un usuario. Debemos asegurarnos que los datos estén ingresados en el formato correcto, se encuentre dentro del rango válido de datos (como para los campos de datos de fechas), y no contengan código malicioso que pueda conducir a inyecciones SQL. Mal formados o datos faltantes que puedan causar que la API genere errores.

¿Cuáles son los diferentes tipos de validaciones?

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

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

Puedes haber notado que algunos formularios,  tan pronto como ingresas un correo electrónico inválido, el formulario marca un error "Por favor ingresa un correo electrónico válido".  Este tipo inmediato de validación usualmente es hecho por el lado del cliente vía JavaScript.

Validation error for incorrect credit card number

En otros casos, tú puedes haber notado que cuando tú llenas un formulario e ingresas detalles como la tarjeta de crédito, este puede mostrar una pantalla de carga y luego mostrar un error "La tarjeta de crédito es inválida".

Aquí, el formulario hace una llamada a su código de lado del servidor, y regresa un error de validación después de realizar revisiones adicionales de tarjeta de crédito. Este caso de validación donde la llamada del lado del servidor  es llamada validación del lado del servidor.

¿Por qué los datos deben ser validados?

La validación es requerida en cualquier momento que aceptas datos del usuario. Esto puede incluir:

  1. Validar el formato de los campos como dirección de correo electrónico, número telefónico,  código postal, nombre, contraseña.
  2. Validar campos obligatorios.
  3. Revisar los datos como cadenas de texto vs. números para campos como número de seguridad social.
  4. Asegurar que el valor ingresado es un valor válido como país, datos y así.

Como configurar la validación del lado del cliente

En el lado del cliente, la validación se puede llevar a cabo de dos maneras:

  1. Usando funcionalidad HTML5
  2. Usando JavaScript

Como configurar la validación con funcionalidad HTML5

HTML5  provee un montón de atributos para ayudar con la validación de datos. Aquí hay algunos casos comunes de validación.

  • Crear campos requeridos usando required
  • Limitar la longitud de los datos:
    • minlength, maxlength: para datos de texto
    • min y max para el valor máximo del tipo num
  • Restringir el tipo de datos usando type:
    • <input type="email" name="multiple>
  • Especificación de patrones de datos usando pattern:
    • Especifica un patrón de expresiones regulares que los datos ingresados deben coincidir

Cuando el valor de entrada coincide la validación HTML5, es asignado a una clase psuedo :valid, y :invalid si no lo hace.

Vamos a intentar un ejemplo:

<form>
<label for="firstname primernombre"> Nombre: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Apellido: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>
Client side form validation for required fields using HTML5 attributes

Enlace a JSFiddle

Aquí tenemos dos campos requeridos: Primer Nombre y Apellido. Intenta este ejemplo en JSFidle. Si omites cualquiera de estos campos y presionas enviar, recibirás un mensaje, "Por favor llena este campo". Esta es la validación usando HTML5  incorporado.

Como configurar la validación usando JavaScript

Cuando implementamos la validación de formulario, hay algunas cosas que debemos considerar:

  1. ¿Qué se define como datos "válidos"? Esto le ayuda a responder preguntas sobre el formato, la longitud, los campos obligatorios, y el tipo de datos.
  2. ¿Qué pasa cuando un dato inválido ingresa? Esto te ayudará a definir la experiencia del usuario de la validación - si desea mostrar un mensaje de error en línea o en la parte superior del formulario, ¿qué tan detallado debe de ser el mensaje de error,  si el formulario debe omitirse de todos modos, debe de haber análisis para rastrear formatos inválidos o datos? Y así sucesivamente.

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

  1. Validación en línea usando JavaScript
  2. API de validación de restricciones HTML5

Validación en línea mediante JavaScript

<form id="form">
  <label for="firstname"> Nombre* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Por favor ingresa el nombre.
  </span>
</form>

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

submit.addEventListener("click", validate);

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

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

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

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Enlace a JSFiddle

En este ejemplo, vamos a revisar los campos requeridos usando JavaScript. Si un campo requerido no está presente, usamos CSS para mostrar un mensaje de error.

Las etiquetas Aria sé modifican en consecuencia para mostrar un error. Usando CSS para mostrar/ocultar un error, estamos reduciendo el número de manipulaciones que necesitamos hacer en el DOM. 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 requieres una validación más compleja o quieres proporcionar un mensaje de error detallado, puedes usar la API de validación de restricciones.

Algunos métodos provistos por esta API son:

  1. checkValidity
  2. setCustomValidity
  3. reportValidity

Las siguientes propiedades son útiles:

  1. validity
  2. validationMessage
  3. willValidate

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

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>

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

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

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Enlace a JSFiddle

No olvides la validación del lado del servidor

La validación del lado del cliente no es la única revisión de validación que deberías hacer. Debes también validar los datos recibidos por el cliente en el código del lado el servidor para asegurar que los datos coincidan con lo que esperas que sea.

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

Mejores prácticas de validación de formularios

  1. Siempre ten una validación del lado del servidor, dado que maliciosos actores puede pasar 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 que los datos deberían verse en caso de un mensaje de error, como - El email no coincide con el formato- prueba@ejemplo.com"
  4. Evita el uso de páginas de error individuales que impliquen una redirección. Esto es una mala experiencia para el usuario y fuerza al usuario a regresar a la página previa a corregir el formulario y perdiendo contexto.
  5. Siempre marca los campos requeridos.