En el pasado, la validación de formularios solía ocurrir en el servidor, después de que una persona hubiera introducido toda su información y hubiera presionado el botón de envío.

Si la información era incorrecta o faltaba algo, el servidor tenía que enviar todo de vuelta junto con un mensaje indicando a esa persona que corrigiera el formulario antes de enviarlo de nuevo.

Era un proceso largo y suponía una gran carga para el servidor.

Hoy en día, JavaScript proporciona numerosas formas de validación de los datos de un formulario en el navegador antes de ser enviado al servidor.

Aquí está el código HTML que utilizaremos en los siguientes ejemplos:

<html>
<head>
  <title>Validación de Formularios</title>
  <script type="text/javascript">
    // la Validación del Formulario irá aquí
  </script>
</head>
<body>
  <form id="formulario">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Nombre de Usuario</td>
        <td><input type="text" id="usuario" /></td>
      </tr>
      <tr>
        <td align="right">Email</td>
        <td><input type="text" id="email" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" id="btn-enviar" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

Validación Básica

Este tipo de validación implica chequear todos los campos obligatorios y asegurar que estén correctamente cumplimentados.

Aquí te dejo un ejemplo básico de una función de validación que  muestra una alerta si los campos de nombre de usuario y email están en blanco, de otro modo devuelve true (verdadero): 

const btnEnviar = document.getElementById('btn-enviar');

const validación = (e) => {
  e.preventDefault();
  const nombreDeUsuario = document.getElementById('usuario');
  const direcciónEmail = document.getElementById('email');
  if (usuario.value === "") {
    alert("Por favor, escribe tu nombre de usuario.");
    usuario.focus();
    return false;
  }
  if (email.value === "") {
    alert("Por favor, escribe tu correo electrónico");
    email.focus();
    return false;
  }
  
  return true;
}

submitBtn.addEventListener('click', validate);

Pero, ¿qué pasaría si alguien introduce un texto al azar como si fuera su dirección de correo electrónico? Actualmente, la función validación seguiría devolviendo true porque el campo no está vacío aunque no sea una dirección de correo válida. (texto aclaración añadida para que quede claro el concepto) Como puedes imaginar, enviar datos incorrectos al servidor puede generar problemas.

Es aquí donde entra en el juego la validación del formato de datos.

Validación del Formato de Datos

Este tipo de validación mira realmente los valores del formulario y verifica que sean correctos.

La validación de las direcciones de correo electrónico es sumamente difícil - hay un gran número de direcciones de correo electrónico y alojamientos legítimos, y es imposible averiguar todas las combinaciones de caracteres válidas.

Dicho esto, hay algunos factores clave que son comunes en todas las direcciones de correo electrónico válidos:

  • Un correo debe contener una @ y al menos un punto (.)
  • La @ no puede ser el primer carácter del correo
  • Él (.) debe ir posicionando al menos un carácter después de la @

Teniendo esto en mente, posiblemente algunos desarrolladores utilicen el regex para determinar si un correo electrónico es válido o no. 

const emailVálido = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

emailVálido('free@code@camp.org') // false
emailVálido('quincy@freecodecamp.org') // true

Añadido al código del último ejemplo, quedaría así: 

const btnEnviar = document.getElementById('btn-enviar');

const validación = (e) => {
  e.preventDefault();
  const nombreDeUsuario = document.getElementById('usuario');
  const direcciónEmail = document.getElementById('email');
  if (usuario.value === "") {
    alert("Por favor, escribe tu nombre de usuario.");
    usuario.focus();
    return false;
  }
    
  if (email.value === "") {
    alert("Por favor, escribe tu correo electrónico");
    email.focus();
    return false;
  }

  if (!emailVálido(email.value)) {
    alert("Por favor, escribe un correo electrónico válido");
    emailAddress.focus();
    return false;
  }
  
  return true; //Se pueden enviar los datos del formulario al servidor
}

const emailVálido = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

submitBtn.addEventListener('click', validate);

Restricciones de Formulario de HTML5

Algunas de las restricciones comúnmente usadas por HTML5  para <input> son los atributos type  (p.ej. type="password"), maxlength, required y disabled.

Una restricción de uso menos común es el atributo pattern quien toma una expresión regular de JavaScript.

Más Información

Traducido del artículo - Basic Form Validation in JavaScript