HTML Academy · Lección

Conceptos básicos de la Constraint Validation API

Consulte el estado de validez y los mensajes personalizados con la Constraint Validation API

Conceptos básicos de la Constraint Validation API es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué es la API de validación de restricciones?

La API de validación de restricciones es una interfaz de JavaScript para leer y establecer el estado de validación de un formulario:

Comprobar si un campo es válido
Leer qué restricción específica no se cumple
Establecer mensajes de error personalizados
Activar mediante programación la interfaz de validación del navegador

Propiedad validity

Cada control de formulario tiene un objeto validity con indicadores booleanos específicos:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Método checkValidity

checkValidity() devuelve true/false y activa el evento invalid:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Método reportValidity

reportValidity() muestra la interfaz nativa de validación del navegador:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Propiedad validationMessage

validationMessage devuelve la cadena con el mensaje de error del navegador:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) establece un error de validación personalizado:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Borrar la validez personalizada

Debe borrar la validez personalizada cuando el usuario corrija el problema:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Evento invalid

El evento invalid se activa en los controles de formulario que no superan la validación:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Propiedad willValidate

willValidate es true si el elemento participa en la validación de restricciones:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Uso de validity en la validación personalizada

Un ejemplo completo de validación personalizada:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Resumen de las propiedades de ValidityState

Todas las propiedades de ValidityState:

valueMissing — es obligatorio, pero está vacío
typeMismatch — el formato no coincide con el tipo
patternMismatch — el patrón de expresión regular no coincide
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — el valor no es un incremento válido
customError — se ha establecido un mensaje con setCustomValidity
badInput — el navegador no puede analizar el valor

Comprobación rápida

¿Cómo se muestra mediante programación la ventana emergente de error de validación nativa del navegador?

Resumen: API de validación de restricciones

Aspectos esenciales de la API de validación de restricciones:

input.validity — objeto ValidityState con indicadores específicos
checkValidity() — devuelve true/false y activa el evento invalid
reportValidity() — comprueba y muestra la interfaz de error nativa
validationMessage — cadena de error del navegador
setCustomValidity(msg) — establece un error personalizado; use una cadena vacía para borrarlo

Preguntas frecuentes

¿La lección «Conceptos básicos de la Constraint Validation API» es gratis?

Sí — el texto completo de «Conceptos básicos de la Constraint Validation API» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Conceptos básicos de la Constraint Validation API»?

Consulte el estado de validez y los mensajes personalizados con la Constraint Validation API Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Conceptos básicos de la Constraint Validation API»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

required pattern min max y maxlength
El atributo novalidate
Conceptos básicos de la Constraint Validation API
Ventajas y desventajas de la validación de HTML5 frente a JavaScript

← Volver a HTML Academy