Curso HTML 9.7 Validación nativa del navegador (novalidate, atributos de validación)

Validación nativa del navegador

La validación nativa del navegador aprovecha el motor interno de HTML5 Constraint Validation API para comprobar campos de formulario sin necesidad de librerías adicionales ni JavaScript complejo. Se basa en:

• El atributo novalidate en el elemento form.
• Atributos de validación en los controles (required, type, pattern, min, max, step, etc.).
• Métodos y propiedades del Constraint Validation API (checkValidity(), reportValidity(), setCustomValidity(), validity, validationMessage, etc.).

1. Atributo novalidate

Por defecto, al pulsar <button type='submit'> el navegador valida todos los campos y, si alguno falla, bloquea el envío mostrando mensajes nativos. Para desactivar esa validación automática:

• <form novalidate>: el formulario no realizará ninguna comprobación automática.
• <input formnovalidate> (en botones de envío): ese botón ignorará la validación aunque el form no tenga novalidate.

<form action='/enviar' method='post' novalidate>
  <label>Nombre (obligatorio)<input name='nombre' required></label>
  <button type='submit'>Enviar</button>
</form>
<!-- Aunque el campo 'nombre' esté vacío, el navegador enviará sin validar. -->

2. Atributos de validación

Estos atributos aplicados a <input>, <textarea> o <select> definen reglas:

<form>
  <label>Correo:<input type='email' name='email' required></label>
  <label>Edad (18-65):<input type='number' name='edad' min='18' max='65' step='1' required></label>
  <label>Código (4 dígitos hex):<input name='hexcode' pattern='[0-9A-Fa-f]{4}' required></label>
  <button type='submit'>Validar y enviar</button>
</form>

3. Mensajes de error personalizados

Usando setCustomValidity() podemos anular el mensaje predeterminado y mostrar el nuestro:

<form id='f1'>
  <label>Usuario (solo letras)<input id='user' pattern='[A-Za-z]+' required></label>
  <button type='submit'>Enviar</button>
</form>
<script>
  const form = document.getElementById('f1');
  const user = document.getElementById('user');
  user.addEventListener('input', () => {
    if (!user.validity.patternMismatch) {
      user.setCustomValidity(''); // limpio mensaje si coincide
    }
  });
  form.addEventListener('submit', e => {
    if (user.validity.patternMismatch) {
      user.setCustomValidity('Solo se permiten caracteres alfabéticos (A-Z).');
      user.reportValidity();    // muestra el mensaje
      e.preventDefault();       // evita envío
    }
  });
</script>

4. Constraint Validation API

• input.checkValidity(): devuelve true si pasa todas las validaciones.
• form.checkValidity(): recorre todos los controles del formulario.
• form.reportValidity(): como checkValidity pero además muestra mensajes nativos en los que fallen.
• element.validity: objeto con estados (valueMissing, typeMismatch, patternMismatch, rangeUnderflow, rangeOverflow, stepMismatch, tooLong, tooShort, valid, etc.).
• element.validationMessage: texto del mensaje de error actual.

5. Flujo típico de validación avanzada

1. Desactivar validación automática con novalidate en el form.
2. En el evento submit:
   • Llamar form.checkValidity().
   • Si es false, llamar form.reportValidity() y preventDefault().
   • Si es true, enviar o procesar datos vía AJAX.
3. Para cada input, escuchar input o change y usar setCustomValidity() para mensajes dinámicos.

<form id='signup' novalidate>
  <input type='email' id='e' required placeholder='tu@correo.com'>
  <input type='password' id='p' minlength='8' required placeholder='mínimo 8 caracteres'>
  <button type='submit'>Registrarse</button>
</form>
<script>
  const f = document.getElementById('signup');
  const email = document.getElementById('e');
  const pass = document.getElementById('p');

  f.addEventListener('submit', ev => {
    if (!f.checkValidity()) {
      f.reportValidity();
      ev.preventDefault();
    } else {
      // Aquí podríamos enviar por fetch(...)
      console.log('Formulario válido, enviando datos...');
    }
  });

  pass.addEventListener('input', () => {
    if (pass.value.length < 8) {
      pass.setCustomValidity('La contraseña debe tener al menos 8 caracteres.');
    } else {
      pass.setCustomValidity('');
    }
  });
</script>

6. Puntos clave

• La validación nativa es rápida y asegura compatibilidad progresiva.
• Para estilos de estado (:valid y :invalid) se emplean reglas CSS, pero no es obligatorio.
• Complementar con JavaScript para mensajes y lógica compleja.
• No olvidar limpiar mensajes con setCustomValidity('') cuando el campo cumple.

Con estos fundamentos y ejemplos tendrás la validación nativa controlada, mejorando la experiencia de usuario y evitando sobrecarga de librerías externas.