JavaScript Academy · Lección

La API Constraint Validation

Use la comprobación de validez integrada.

La API Constraint Validation es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Validación integrada

Los campos de los formularios HTML admiten atributos como required, min, max, pattern y type="email". La API Constraint Validation permite que JavaScript inspeccione y controle esta validación integrada.

checkValidity

checkValidity devuelve un booleano y activa un evento invalid en cada control que falla, sin mostrar el aviso emergente del navegador.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity funciona como checkValidity, pero también muestra la interfaz de mensajes de validación del navegador para los campos no válidos.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

El objeto validity

Cada control tiene un objeto validity con indicadores booleanos que describen exactamente cuál es el problema.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid es true únicamente cuando el campo cumple todas las restricciones; resume los demás indicadores.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage contiene el mensaje localizado que mostraría el navegador para el error actual.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity marca un campo como no válido con su propio mensaje. Una cadena no vacía significa que no es válido; una cadena vacía lo borra.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Borrar siempre los errores personalizados

Si establece un mensaje personalizado, debe borrarlo con una cadena vacía cuando el campo sea válido; de lo contrario, permanecerá no válido para siempre.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

El evento invalid

Escuche el evento invalid para ejecutar lógica personalizada, como aplicar estilos a un campo, cuando falle la validación.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Desactivar los avisos nativos

Añada novalidate al formulario para suprimir las ventanas emergentes nativas y seguir usando la API para mostrar sus propios mensajes.

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

Aplicar estilos con :valid y :invalid

Las pseudoclases CSS :valid y :invalid aplican estilos automáticamente a los campos según su estado de validación.

Comprobación rápida

Regla de validación personalizada.

Resumen

La API Constraint Validation funciona con los atributos de restricciones de HTML. Use checkValidity/reportValidity para comprobar los errores (y mostrarlos opcionalmente), inspeccione los indicadores de validity y validationMessage, y añada reglas personalizadas con setCustomValidity (bórrelas con una cadena vacía). El evento invalid y las pseudoclases CSS :valid/:invalid ayudan a aplicar estilos.

Preguntas frecuentes

¿La lección «La API Constraint Validation» es gratis?

Sí — el texto completo de «La API Constraint Validation» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «La API Constraint Validation»?

Use la comprobación de validez integrada. Practicas JavaScript 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 JavaScript Academy?

No se requiere experiencia previa. JavaScript 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 4 de 4.

¿Cuánto tiempo toma la lección «La API Constraint Validation»?

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 JavaScript Academy?

Sí. Cada lección de JavaScript 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

← Volver a JavaScript Academy