Tutorial

Validaciones de formularios con JavaScript: Guía completa

Aprende a validar campos, mostrar errores personalizados y crear feedback visual que realmente mejora la experiencia del usuario

📅 18 Agosto 2025 ⏱️ 12 min lectura 👤 StudyCode Pro

¿Tu formulario se ve bonito pero no valida nada? Es como tener un coche sin frenos. En este tutorial transformarás tu formulario básico en uno que valida campos, muestra errores útiles y guía al usuario hacia el éxito.

📋 Requisitos previos

Este tutorial continúa desde nuestro formulario de contacto básico con HTML y CSS. Si no lo has hecho aún, créalo primero y luego vuelve aquí.

🤔 ¿Por qué validar formularios?

Un formulario sin validaciones es como una puerta sin cerradura:

Con validaciones JavaScript:

🛠️ El resultado final

Esto es lo que vamos a construir:

👆 ¡Prueba a enviar el formulario vacío o con datos incorrectos!

¿Viste la magia? Mensajes de error específicos, colores que cambian, y feedback inmediato. Ahora vamos a crearlo paso a paso.

🏗️ Paso 1: Preparar el HTML

Primero, vamos a modificar nuestro formulario de contacto básico para añadir elementos donde mostrar los errores:

📄 index.html actualizado

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario con Validaciones</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Contacta con Nosotros</h1>
        <form id="contact-form" class="contact-form">
            
            <div class="form-group">
                <label for="name">Nombre:</label>
                <input type="text" id="name" name="name" placeholder="Tu nombre completo">
                <span class="error-message" id="name-error"></span>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="tu@email.com">
                <span class="error-message" id="email-error"></span>
            </div>

            <div class="form-group">
                <label for="message">Mensaje:</label>
                <textarea id="message" name="message" rows="5" placeholder="Tu mensaje aquí..."></textarea>
                <span class="error-message" id="message-error"></span>
            </div>

            <button type="submit">Enviar Mensaje</button>
            
            <div id="success-message" class="success-message" style="display: none;">
                ¡Mensaje enviado correctamente! 🎉
            </div>
        </form>
    </div>

    <script src="validation.js"></script>
</body>
</html>

🔍 Cambios importantes:

🎨 Paso 2: CSS para feedback visual

Añade estos estilos a tu archivo styles.css existente:

/* Estilos para validaciones */
.error-message {
    display: block;
    color: #ef4444;
    font-size: 14px;
    margin-top: 5px;
    min-height: 20px;
}

/* Campo con error */
input.error,
textarea.error {
    border-color: #ef4444 !important;
    background-color: #fef2f2;
}

/* Campo válido */
input.success,
textarea.success {
    border-color: #10b981 !important;
    background-color: #f0fdf4;
}

/* Mensaje de éxito */
.success-message {
    background-color: #10b981;
    color: white;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}

⚡ Paso 3: La magia de JavaScript

Crea un archivo validation.js y añade este código:

// Esperar a que la página se cargue completamente
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    
    // Escuchar el evento submit del formulario
    form.addEventListener('submit', function(e) {
        // Prevenir el envío normal del formulario
        e.preventDefault();
        
        // Validar el formulario
        if (validateForm()) {
            // Si todo está bien, mostrar mensaje de éxito
            showSuccessMessage();
        }
    });
});

// Función principal de validación
function validateForm() {
    // Limpiar errores previos
    clearErrors();
    
    let isValid = true;
    
    // Validar cada campo
    if (!validateName()) isValid = false;
    if (!validateEmail()) isValid = false;
    if (!validateMessage()) isValid = false;
    
    return isValid;
}

// Validar campo nombre
function validateName() {
    const name = document.getElementById('name').value.trim();
    
    if (name === '') {
        showError('name', 'El nombre es obligatorio');
        return false;
    }
    
    if (name.length < 2) {
        showError('name', 'El nombre debe tener al menos 2 caracteres');
        return false;
    }
    
    showSuccess('name');
    return true;
}

// Validar campo email
function validateEmail() {
    const email = document.getElementById('email').value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (email === '') {
        showError('email', 'El email es obligatorio');
        return false;
    }
    
    if (!emailRegex.test(email)) {
        showError('email', 'Por favor ingresa un email válido');
        return false;
    }
    
    showSuccess('email');
    return true;
}

// Validar campo mensaje
function validateMessage() {
    const message = document.getElementById('message').value.trim();
    
    if (message === '') {
        showError('message', 'El mensaje es obligatorio');
        return false;
    }
    
    if (message.length < 10) {
        showError('message', 'El mensaje debe tener al menos 10 caracteres');
        return false;
    }
    
    showSuccess('message');
    return true;
}

// Mostrar error en un campo específico
function showError(fieldId, message) {
    const field = document.getElementById(fieldId);
    const errorElement = document.getElementById(fieldId + '-error');
    
    // Añadir clase de error al campo
    field.classList.add('error');
    field.classList.remove('success');
    
    // Mostrar mensaje de error
    errorElement.textContent = message;
}

// Mostrar éxito en un campo específico
function showSuccess(fieldId) {
    const field = document.getElementById(fieldId);
    const errorElement = document.getElementById(fieldId + '-error');
    
    // Añadir clase de éxito al campo
    field.classList.add('success');
    field.classList.remove('error');
    
    // Limpiar mensaje de error
    errorElement.textContent = '';
}

// Limpiar todos los errores
function clearErrors() {
    const errorElements = document.querySelectorAll('.error-message');
    const fields = document.querySelectorAll('input, textarea');
    
    // Limpiar mensajes de error
    errorElements.forEach(function(element) {
        element.textContent = '';
    });
    
    // Quitar clases de error y éxito
    fields.forEach(function(field) {
        field.classList.remove('error', 'success');
    });
    
    // Ocultar mensaje de éxito
    document.getElementById('success-message').style.display = 'none';
}

// Mostrar mensaje de éxito general
function showSuccessMessage() {
    document.getElementById('success-message').style.display = 'block';
    
    // Hacer scroll al mensaje de éxito
    document.getElementById('success-message').scrollIntoView({
        behavior: 'smooth'
    });
}

🔍 ¿Cómo funciona cada parte?

1. Event Listener del formulario

form.addEventListener('submit', function(e) {
    e.preventDefault(); // Evita que se envíe automáticamente
});

¿Qué hace? Intercepta el envío del formulario para validar antes.

2. Validación con Regular Expressions

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

¿Qué hace? Verifica que el email tenga formato válido (algo@algo.algo).

3. Feedback visual dinámico

field.classList.add('error'); // Añade borde rojo
field.classList.add('success'); // Añade borde verde

¿Qué hace? Cambia visualmente el campo según si es válido o no.

🚀 Validaciones avanzadas

Una vez que domines lo básico, puedes añadir validaciones más sofisticadas:

Validación en tiempo real

Añade esto a tu JavaScript para validar mientras el usuario escribe:

// Validación en tiempo real
document.getElementById('email').addEventListener('blur', function() {
    validateEmail();
});

document.getElementById('name').addEventListener('blur', function() {
    validateName();
});

Validación de contraseña segura

function validatePassword(password) {
    const minLength = password.length >= 8;
    const hasNumber = /\d/.test(password);
    const hasLetter = /[a-zA-Z]/.test(password);
    
    if (!minLength) return 'La contraseña debe tener al menos 8 caracteres';
    if (!hasNumber) return 'La contraseña debe contener al menos un número';
    if (!hasLetter) return 'La contraseña debe contener al menos una letra';
    
    return true;
}

❓ Preguntas frecuentes sobre validaciones

¿Es suficiente validar solo en JavaScript?

No. La validación JavaScript es para mejorar la experiencia del usuario, pero siempre debes validar también en el servidor. JavaScript puede ser deshabilitado o manipulado.

¿Cómo validar formularios con múltiples pasos?

Puedes aplicar la misma lógica pero validando sección por sección. Crea funciones de validación específicas para cada paso y llama solo las necesarias.

¿Qué es mejor: required HTML o validación JavaScript?

JavaScript te da control total sobre mensajes de error, estilos y lógica compleja. HTML required es más básico pero funciona sin JavaScript habilitado.

¿Puedo usar librerías para validaciones?

Sí, librerías como Joi, Yup o Formik simplifican validaciones complejas. Pero dominar lo básico primero te ayuda a entender qué hace cada librería.

🎯 Errores comunes y cómo evitarlos

❌ Error 1: No limpiar errores previos

// MAL: Los errores se acumulan
function validateForm() {
    validateName();
    validateEmail();
}

// BIEN: Limpiar antes de validar
function validateForm() {
    clearErrors(); // ¡Importante!
    validateName();
    validateEmail();
}

❌ Error 2: No usar trim()

// MAL: Acepta espacios en blanco
if (name === '') {

// BIEN: Elimina espacios
if (name.trim() === '') {

❌ Error 3: Regex de email demasiado simple

// MAL: Muy básico
const emailRegex = /.+@.+/;

// BIEN: Más completo
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

🚀 Próximos pasos: Lleva tu formulario al siguiente nivel

Ya tienes un formulario con validaciones JavaScript completamente funcional. Pero esto es solo el comienzo:

📤 Siguiente: Envío real de emails

Conecta tu formulario con servicios como EmailJS, Netlify Forms o tu propio backend

Próximamente...

🔒 Después: Captcha y seguridad

Protege tu formulario contra spam y bots

Próximamente...

💡 Conecta con lo que ya sabes

Si quieres dominar más JavaScript interactivo, revisa nuestro tutorial sobre cómo hacer tu primer botón que funcione. Los eventos y manipulación del DOM que aprendiste aquí son la base de toda la programación frontend.

🎉 ¡Felicidades!

Acabas de crear un sistema de validación completo desde cero. No subestimes lo que has logrado.

Has dominado conceptos fundamentales:

Estos skills son la base de frameworks modernos como React, Vue o Angular. Cuando uses librerías de validación como Formik o Yup, entenderás exactamente qué está pasando por debajo.

Mientras tanto, puedes seguir construyendo con nuestro tutorial de formularios básicos o explorar más interactividad en nuestro roadmap completo de Frontend.

¡El mundo de las aplicaciones web interactivas te espera! 🚀