Cómo validar un formulario con JavaScript paso a paso

Validar un formulario con JavaScript es una de las prácticas más importantes cuando estás aprendiendo desarrollo web. Casi cualquier página real necesita formularios: formularios de contacto, registros, newsletters, reservas, login, encuestas o solicitudes de presupuesto.

La validación sirve para comprobar que el usuario ha escrito correctamente los datos antes de enviar el formulario. Por ejemplo, podemos revisar si el nombre está vacío, si el email tiene un formato válido o si el mensaje tiene suficientes caracteres.

En esta guía aprenderás cómo crear una validación sencilla con HTML, CSS y JavaScript, explicada paso a paso y pensada para principiantes.

Qué es validar un formulario con JavaScript

Validar un formulario significa revisar los datos que escribe el usuario antes de enviarlos.

Por ejemplo, si tienes un formulario de contacto, puedes comprobar:

Que el campo nombre no esté vacío
Que el email tenga un formato correcto
Que el mensaje tenga una longitud mínima
Que se muestre un aviso si algo está mal
Que el formulario no se envíe hasta que todo esté correcto

JavaScript permite hacer estas comprobaciones directamente en el navegador, sin esperar a que el servidor responda. Esto mejora la experiencia del usuario porque los errores se muestran al instante.

Estructura básica de un formulario HTML

Primero necesitamos un formulario sencillo con tres campos: nombre, email y mensaje.

<form id="formularioContacto">
  <div>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" placeholder="Escribe tu nombre">
    <small class="error"></small>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="tucorreo@email.com">
    <small class="error"></small>
  </div>

  <div>
    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" placeholder="Escribe tu mensaje"></textarea>
    <small class="error"></small>
  </div>

  <button type="submit">Enviar mensaje</button>
</form>

Cada campo tiene un <small class="error"></small>. Ahí mostraremos los mensajes de error cuando el usuario deje un campo vacío o escriba un dato incorrecto.

Capturar el formulario con JavaScript

Para validar el formulario, primero tenemos que seleccionarlo desde JavaScript usando getElementById.

const formulario = document.getElementById("formularioContacto");
const nombre = document.getElementById("nombre");
const email = document.getElementById("email");
const mensaje = document.getElementById("mensaje");

Con esto, JavaScript ya puede acceder al formulario y a cada campo.

Evitar que el formulario se envíe automáticamente

Cuando un formulario se envía, la página normalmente se recarga. Para validar antes de enviar, usamos el evento submit y el método preventDefault().

formulario.addEventListener("submit", function(evento) {
  evento.preventDefault();

  validarFormulario();
});

Esto significa que cuando el usuario haga clic en el botón de enviar, el formulario no se enviará automáticamente. Primero ejecutaremos la función validarFormulario().

Crear la función para validar el formulario

Ahora creamos una función que revise si los campos están vacíos.

function validarFormulario() {
  if (nombre.value.trim() === "") {
    mostrarError(nombre, "El nombre es obligatorio");
  }

  if (email.value.trim() === "") {
    mostrarError(email, "El email es obligatorio");
  }

  if (mensaje.value.trim() === "") {
    mostrarError(mensaje, "El mensaje es obligatorio");
  }
}

Usamos .trim() para eliminar espacios al principio y al final. Así evitamos que el usuario escriba solo espacios en blanco.

Por ejemplo, esto no debería ser válido:

"     "

Aunque visualmente parezca que el campo tiene algo, en realidad no hay contenido útil.

Mostrar mensajes de error

Para no repetir código, podemos crear una función llamada mostrarError.

function mostrarError(input, texto) {
  const contenedor = input.parentElement;
  const error = contenedor.querySelector(".error");

  error.textContent = texto;
  input.classList.add("input-error");
}

Esta función busca el mensaje de error que está dentro del mismo bloque del campo y le coloca el texto correspondiente.

También añade una clase llamada input-error, que podemos usar en CSS para marcar el borde del campo en rojo.

Mostrar cuando un campo es correcto

También podemos crear una función para limpiar errores cuando el campo está bien.

function mostrarCorrecto(input) {
  const contenedor = input.parentElement;
  const error = contenedor.querySelector(".error");

  error.textContent = "";
  input.classList.remove("input-error");
  input.classList.add("input-correcto");
}

Así el usuario puede ver visualmente qué campos están bien y cuáles debe corregir.

Validar un email con JavaScript

Uno de los puntos más importantes es validar el formato del correo electrónico. Para eso podemos usar una expresión regular sencilla.

<form id="formularioEmail">
  <label for="email">Email</label>
  <input type="text" id="email" placeholder="tucorreo@email.com">
  <small id="mensaje"></small>

  <button type="submit">Validar email</button>
</form>

<script>
  const formularioEmail = document.getElementById("formularioEmail");
  const email = document.getElementById("email");
  const mensaje = document.getElementById("mensaje");

  formularioEmail.addEventListener("submit", function(evento) {
    evento.preventDefault();

    if (validarEmail(email.value.trim())) {
      mensaje.textContent = "Email correcto";
      mensaje.className = "correcto";
    } else {
      mensaje.textContent = "Escribe un email válido";
      mensaje.className = "error";
    }
  });

  function validarEmail(valor) {
    const expresion = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
    return expresion.test(valor);
  }
</script>

function validarEmail(email) {
  const expresion = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return expresion.test(email);
}

Esta función devuelve true si el email parece válido y false si tiene un formato incorrecto.

Por ejemplo:

Correcto: usuario@email.com
Incorrecto: usuarioemail.com
Incorrecto: usuario@
Incorrecto: @email.com

Validar todos los campos del formulario

Ahora podemos mejorar la función principal para validar nombre, email y mensaje correctamente.

function validarFormulario() {
  let formularioValido = true;

  if (nombre.value.trim() === "") {
    mostrarError(nombre, "El nombre es obligatorio");
    formularioValido = false;
  } else {
    mostrarCorrecto(nombre);
  }

  if (email.value.trim() === "") {
    mostrarError(email, "El email es obligatorio");
    formularioValido = false;
  } else if (!validarEmail(email.value.trim())) {
    mostrarError(email, "Escribe un email válido");
    formularioValido = false;
  } else {
    mostrarCorrecto(email);
  }

  if (mensaje.value.trim() === "") {
    mostrarError(mensaje, "El mensaje es obligatorio");
    formularioValido = false;
  } else if (mensaje.value.trim().length < 10) {
    mostrarError(mensaje, "El mensaje debe tener al menos 10 caracteres");
    formularioValido = false;
  } else {
    mostrarCorrecto(mensaje);
  }

  if (formularioValido) {
    alert("Formulario enviado correctamente");
    formulario.reset();
  }
}

La variable formularioValido nos ayuda a saber si todo está correcto. Si algún campo falla, cambia a false.

Solo mostramos el mensaje de éxito cuando todos los campos pasan la validación.

Código completo del formulario con JavaScript

Aquí tienes el código completo con HTML, CSS y JavaScript. Puedes copiarlo y probarlo directamente en un archivo .html.

<form id="formularioContacto">
  <div>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" placeholder="Escribe tu nombre">
    <small class="error"></small>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="text" id="email" placeholder="tucorreo@email.com">
    <small class="error"></small>
  </div>

  <div>
    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" placeholder="Escribe tu mensaje"></textarea>
    <small class="error"></small>
  </div>

  <button type="submit">Enviar mensaje</button>
</form>

<script>
  const formulario = document.getElementById("formularioContacto");
  const nombre = document.getElementById("nombre");
  const email = document.getElementById("email");
  const mensaje = document.getElementById("mensaje");

  formulario.addEventListener("submit", function(evento) {
    evento.preventDefault();

    let formularioValido = true;

    if (nombre.value.trim() === "") {
      mostrarError(nombre, "El nombre es obligatorio");
      formularioValido = false;
    } else {
      mostrarCorrecto(nombre);
    }

    if (email.value.trim() === "") {
      mostrarError(email, "El email es obligatorio");
      formularioValido = false;
    } else if (!validarEmail(email.value.trim())) {
      mostrarError(email, "Escribe un email válido");
      formularioValido = false;
    } else {
      mostrarCorrecto(email);
    }

    if (mensaje.value.trim().length < 10) {
      mostrarError(mensaje, "El mensaje debe tener al menos 10 caracteres");
      formularioValido = false;
    } else {
      mostrarCorrecto(mensaje);
    }

    if (formularioValido) {
      alert("Formulario enviado correctamente");
      formulario.reset();
    }
  });

  function mostrarError(input, texto) {
    const contenedor = input.parentElement;
    const error = contenedor.querySelector(".error");

    error.textContent = texto;
    input.classList.add("input-error");
    input.classList.remove("input-correcto");
  }

  function mostrarCorrecto(input) {
    const contenedor = input.parentElement;
    const error = contenedor.querySelector(".error");

    error.textContent = "";
    input.classList.remove("input-error");
    input.classList.add("input-correcto");
  }

  function validarEmail(valor) {
    const expresion = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
    return expresion.test(valor);
  }
</script>

Cómo validar campos en tiempo real

También puedes validar mientras el usuario escribe. Para eso usamos el evento input.

nombre.addEventListener("input", function() {
  if (nombre.value.trim() !== "") {
    mostrarCorrecto(nombre);
  }
});

Esto mejora la experiencia porque el usuario no tiene que esperar a pulsar el botón para saber si algo está bien o mal.

Una versión más completa sería:

nombre.addEventListener("input", function() {
  if (nombre.value.trim() === "") {
    mostrarError(nombre, "El nombre es obligatorio");
  } else {
    mostrarCorrecto(nombre);
  }
});

email.addEventListener("input", function() {
  if (email.value.trim() === "") {
    mostrarError(email, "El email es obligatorio");
  } else if (!validarEmail(email.value.trim())) {
    mostrarError(email, "Escribe un email válido");
  } else {
    mostrarCorrecto(email);
  }
});

mensaje.addEventListener("input", function() {
  if (mensaje.value.trim().length < 10) {
    mostrarError(mensaje, "El mensaje debe tener al menos 10 caracteres");
  } else {
    mostrarCorrecto(mensaje);
  }
});

Errores comunes al validar formularios con JavaScript

Un error común es validar solo en JavaScript y olvidar la validación del lado del servidor. JavaScript mejora la experiencia del usuario, pero no debe ser la única protección en formularios reales.

Otro error frecuente es mostrar mensajes genéricos como “error” o “campo incorrecto”. Es mejor decir exactamente qué debe corregir el usuario.

También es habitual olvidar preventDefault(). Si no lo usas, el formulario puede enviarse antes de que la validación se ejecute correctamente.

Otro problema común es no usar .trim(), permitiendo que un campo con solo espacios sea considerado válido.

Buenas prácticas para validar formularios

Usa mensajes claros y humanos. En lugar de escribir “campo inválido”, es mejor decir “Escribe un email válido”.

Marca visualmente los errores. Un borde rojo, un mensaje debajo del campo y una indicación clara ayudan mucho al usuario.

No abuses de alertas. Para formularios reales, suele ser mejor mostrar un mensaje dentro de la página.

No confíes solo en JavaScript. Si el formulario envía datos a un servidor, también debes validar esos datos en el backend.

Mantén el formulario simple. Cuantos menos campos innecesarios tenga, más fácil será completarlo.

Preguntas frecuentes sobre validar formularios con JavaScript

¿Cómo validar un formulario con JavaScript?

Puedes validar un formulario capturando el evento submit, usando preventDefault() y comprobando el valor de cada campo antes de enviarlo.

formulario.addEventListener("submit", function(evento) {
  evento.preventDefault();
  validarFormulario();
});

¿Cómo validar que un input no esté vacío?

Puedes usar .trim() para comprobar que el campo no esté vacío ni tenga solo espacios.

if (nombre.value.trim() === "") {
  mostrarError(nombre, "El nombre es obligatorio");
}

¿Cómo validar un email con JavaScript?

Puedes usar una expresión regular sencilla:

function validarEmail(email) {
  const expresion = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return expresion.test(email);
}

¿Qué hace preventDefault en un formulario?

preventDefault() evita que el formulario se envíe automáticamente. Esto permite validar los campos antes de continuar.

¿JavaScript es suficiente para validar un formulario?

No. JavaScript ayuda a mejorar la experiencia del usuario, pero en formularios reales también debes validar los datos en el servidor para mayor seguridad.

Para finalizar

Validar formularios con JavaScript es una habilidad básica y muy importante para cualquier persona que esté aprendiendo desarrollo web. Te permite crear páginas más profesionales, mejorar la experiencia del usuario y evitar que se envíen campos vacíos o datos mal escritos.

Con este ejemplo ya puedes validar nombre, email y mensaje, mostrar errores personalizados y evitar que el formulario se envíe hasta que todo esté correcto. A partir de aquí puedes ampliar el formulario con teléfono, contraseña, confirmación de datos o mensajes de éxito más avanzados.