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.

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>

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.

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>

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