Formularios y validación en cliente

1 // Leer los datos de un formulario

Cada campo tiene la propiedad value, y las casillas y botones de opción, checked:

const formulario = document.querySelector('#registro');
const email = formulario.querySelector('#email');
const acepta = formulario.querySelector('#acepta');

email.value;     // 'ana@correo.es'
acepta.checked;  // true o false

Cuando el formulario tiene muchos campos, es más cómodo usar FormData, que recoge de una vez todos los campos que tengan atributo name:

formulario.addEventListener('submit', (e) => {
  e.preventDefault();
  const datos = new FormData(formulario);

  datos.get('email');                       // valor de un campo
  const objeto = Object.fromEntries(datos); // { email: '...', edad: '...' }
});

2 // Validación nativa del navegador

Antes de escribir una línea de JavaScript, el HTML ya permite declarar muchas reglas. El navegador las comprueba al enviar, muestra un mensaje en el idioma del usuario y no deja continuar mientras haya errores:

<form id="registro">
  <input name="nombre" required minlength="2">
  <input name="email" type="email" required>
  <input name="edad" type="number" min="16" max="99">
  <input name="codigo" pattern="[0-9]{5}" title="Cinco dígitos">
  <button>Registrarme</button>
</form>

Además, cada campo expone su estado a CSS mediante las pseudoclases :valid e :invalid, y a JavaScript mediante la API de validación.

3 // Reglas propias con la API de validación

Hay reglas que el HTML no puede expresar: que dos contraseñas coincidan, que una fecha de fin sea posterior a la de inicio o que un nombre de usuario no esté ya usado. Para eso, cada campo tiene métodos y propiedades que se integran con la validación nativa:

La idea de setCustomValidity es que tu regla se comporte igual que una regla nativa: el campo pasa a :invalid, el navegador muestra tu mensaje y el formulario no se envía.

4 // La validación en cliente no es seguridad

Todo lo que se ejecuta en el navegador está bajo el control de quien lo usa. Cualquiera puede abrir las herramientas de desarrollo y quitar un required, desactivar JavaScript o enviar la petición al servidor directamente sin pasar por tu formulario.

Por eso la validación en cliente tiene un único objetivo: que el usuario sepa rápido qué tiene que corregir. La protección de los datos corresponde siempre al servidor, que debe volver a comprobar todas las reglas. Es la misma separación que verás en el módulo de desarrollo en entorno servidor.

const formulario = document.querySelector('#registro');
const password = formulario.querySelector('[name="password"]');
const repetir = formulario.querySelector('[name="repetir"]');

function comprobarCoincidencia() {
  const mensaje = password.value === repetir.value ? '' : 'Las contraseñas no coinciden';
  repetir.setCustomValidity(mensaje);
}

password.addEventListener('input', comprobarCoincidencia);
repetir.addEventListener('input', comprobarCoincidencia);

formulario.addEventListener('submit', (e) => {
  e.preventDefault();
  const datos = Object.fromEntries(new FormData(formulario));
  console.log('Enviar al servidor:', datos);
});

5 // Para practicar

Lee todos los tipos de campo con FormData y añade una regla que el HTML no puede expresar. Cada ejercicio trae el enunciado en los comentarios del código.