JavaScript Academy · Lección

Validación en el cliente

Valide los datos de entrada antes de enviarlos a cualquier lugar.

Validación en el cliente es una lección gratuita de JavaScript 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 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.

Por qué validar en el cliente

La validación del lado del cliente proporciona comentarios inmediatos y una experiencia más fluida. Recuerde que es una comodidad, no una medida de seguridad: valide siempre también en el servidor.

Validar al enviar

Un patrón habitual consiste en comprobar los campos al enviar el formulario y cancelar el envío si alguno no es válido.

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

Comprobar un campo obligatorio

Quite los espacios en blanco del valor y rechace las entradas vacías. Quitar los espacios evita aceptar cadenas compuestas únicamente por espacios.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Reglas de longitud

Compare la longitud sin espacios iniciales ni finales con los límites mínimo y máximo en campos como las contraseñas.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Coincidencia de patrones

Las expresiones regulares comprueban formatos como los de las direcciones de correo electrónico. Mantenga los patrones sencillos y acompáñelos de comprobaciones en el servidor.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Mostrar mensajes de error

Muestre los comentarios cerca del campo mediante un elemento de error específico y textContent para mantenerse protegido frente a XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Borrar errores

Restablezca el mensaje cuando el campo sea válido para que los errores antiguos no permanezcan.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Validación en tiempo real

Valide en el evento input o blur para proporcionar comentarios en tiempo real mientras el usuario escribe o abandona un campo.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Accesibilidad con aria-invalid

Establezca aria-invalid y vincule los errores con aria-describedby para que la tecnología de asistencia anuncie los problemas.

emailInput.setAttribute("aria-invalid", "true");

Enfocar el primer error

Cuando un envío falle, mueva el foco al primer campo no válido para que el usuario pueda corregirlo inmediatamente.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Validar también en el servidor

La validación del cliente se puede eludir desactivando JavaScript o creando solicitudes manualmente. Considere el servidor como la fuente de verdad.

Comprobación rápida

Mentalidad de seguridad.

Resumen

La validación manual comprueba los campos (obligatoriedad, longitud y patrón) y cancela el envío si falla mediante preventDefault. Muestre y borre los mensajes de forma segura con textContent, valide en tiempo real con input/blur, mejore la accesibilidad con aria-invalid y enfoque el primer error. Valide siempre de nuevo en el servidor.

Preguntas frecuentes

¿La lección «Validación en el cliente» es gratis?

Sí — el texto completo de «Validación en el cliente» 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 «Validación en el cliente»?

Valide los datos de entrada antes de enviarlos a cualquier lugar. 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 3 de 4.

¿Cuánto tiempo toma la lección «Validación en el cliente»?

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